How to Scroll to a Section in Elementor

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

Check Demo

How to scroll to sections using Elementor

Video Tutorial

Step 1

Install fullPage.js plugin

Get fullPage.js

Trusted by the world's most innovative companies

Step 2

Open the Page Settings

Step 3

Under General Seettings, click on the fullPage.js Settings

Step 4

Enable fullPage.js

Step 5

Add sections to your page

Step 6

Style and add content to your sections

Step 7

Now, you can scroll to sections effortlessly using your mouse wheel or trackpad.

You can also add a menu with links to each section using their internal anchors. Clicking on a link will scroll to the section smoothly with an animated effect.

The same applies to buttons and other links, allowing users to scroll to sections when clicking them for a seamless navigation experience.

Get fullPage.js

FAQs

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

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 Elementor?

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 Elementor.

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

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

fullPage.js uses advanced JavaScript techniques to achieve a smooth scrolling effect, while Elementor'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 Elementor can do

Join 35,306 Web Developers

Developers worldwide use fullPage.js for Elementor 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 Elementor plugin.