How to Scroll to a Section in Gutenberg

Discover the easiest way to scroll to sections using Gutenberg for WordPress with a smooth scroll effect. No code needed!

Check Demo

How to scroll to sections using Gutenberg

Video Tutorial

Step 1

Install fullPage.js plugin

Get fullPage.js

Trusted by the world's most innovative companies

Step 2

Add the fullPage.js Gutenberg block

Step 3

2 Vertical sections are created by default

Step 4

Enable fullPage.js - And get the Snap Scroll effect

Step 5

Click on "Add Section" or "Add section with slides" to add more vertical or horizontal sections respectively.

Step 6

Style and add content to your sections

Get fullPage.js

FAQs

Can I make the "scroll to section" effect with a button in Gutenberg?

Yes! You can make a button scroll to a section. It is as easy as adding a link to the section you want by using the "permalink" or "hash" you defined for it on the fullPage.js settings.

For example, if you add the link "#contact" you will be able to scroll to the contact section if you defined its permalink as "contact".

How can I click a link to scroll to the next section in Gutenberg?

To adjust the next section into place you can add the following JavaScript event to your button or text:

onclick="fp_fullpage.moveDown()"

You can also use the "permalink" or "hash" assigned to the next section to scroll smoothly to it.

How can I jump to a specific section with scroll?

To jump to a section when clicking any element (link, button, image..) you have to create a link using the "permalink" or "hash" assigned to the destination section.

For example, if you add the link "#contact" you will be able to scroll to the contact section if you defined its permalink as "contact".

Can I scroll to a section defining an offset?

Yes. fullPage.js provides an offset extension that allows you to define an offset for each section. This way you can scroll to a section that will not be full height.

Is scrolling to sections responsive?

Yes. fullPage.js is built with responsiveness in mind. You can define a threshold in pixels to define breakpoints and turn off the snap effect for smaller screens.

Check out this demo of how to use responsive scroll to sections in Gutenberg.

Why using fullPage.js and not a default snap scroll in Gutenberg?

fullPage.js was born to provide full customization over the scroll animation. Customizations that are not possible using the default snap scroll in Gutenberg.

fullPage.js uses advanced JavaScript techniques to achieve a smooth scrolling effect, while Gutenberg's default snap effect uses simple CSS, which lacks many features and configurations. (For example, scrolling speed control, URL permalinks, scrolling inside full-screen sections, URL history, navigation bullets, etc.)

With fullPage.js, you can define things such as snap scroll speed, use a Parallax effect, and play with 80+ other configurable options.

What kind of websites are best for a scroll to sections effect?

Smooth snap scrolling is ideal for simple and beautiful landing pages:

Discover what fullpage.js for Gutenberg can do

Join 35,306 Web Developers

Developers worldwide use fullPage.js for Gutenberg to save time, money, and create beautiful sites in a snap.

Get fullPage.js!

Websites that scroll to sections built with fullPage.js

Check out these amazing websites that snap sections in place on scrolling. Built with fullPage Gutenberg plugin.