Website Building » Elementor » How do I scroll to a section Elementor?

How do I scroll to a section Elementor?

Last updated on March 19, 2023 @ 10:43 am

When working with Elementor, it can be difficult to scroll to a specific part of the interface. This is especially true if the interface is wide and you want to scroll to a specific section. To scroll to a specific section in Elementor, we will need to link an object to the section using an anchor link. To get started, follow these steps:

1. Go to the first point of contact which is the object to be linked to the section. In this case, we will be using a button on the same page. Click on the button and add your preferred link in the “Link” section of the settings on the left menu. The link should have the format, #anchorname.

2. Add an anchor link. To do this, select the “Menu Anchor” widget in the Elementor window and drag it above the content that you want to link to the button.

NOTE: This will allow you to scroll to that specific section whenever you click on the linked object button.

3. Input the anchor name created earlier in the “ID of the Menu Anchor” section. This is found in the Anchor settings of the Elementor window.

NOTE: Take note that this is just the button link format without the “#” sign.

 

PRO TIP: If you are using the Elementor page builder plugin for WordPress, beware of a potential issue when scrolling to sections on your pages. If you have created anchor links to jump to specific sections on a page, and are using the “smooth scroll” option in the Elementor settings, you may find that the scrolling does not work properly on some browsers. The issue seems to be related to the way that Elementor’s smooth scroll script is initialized, and can be fixed by adding a few lines of code to your WordPress theme.

4. Save your changes. To do this, click on the “Update” button below.

5. Preview your changes. You can do this by clicking on the “eye” icon beside the “Update” button. You should now be able to scroll to a specific section on a page by clicking on the linked button.


Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.