V4 Extentions Scroll To Estimated reading: 4 minutes 4 views Click a button and glide to any section of the page. Build one-page menus and a “Back to top” button in a few clicks. No code needed. WORKS ON Any V4 element TRIGGER Click PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. Scroll To only works on the live page when Pro is active. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab, then click Interaction. Under Interaction Extensions, turn on Scroll To. Click Save Settings. Scroll To Extension (click to zoom) STEP 2 Give the Target an ID Choose the section you want to scroll to, and give it an ID. Select the section, for example a Flexbox. In the General tab, open the Settings section. Type a name in the ID field, for example features. Do not type the # here. STEP 3 Set Up the Button Now choose the element that starts the scroll. A Button is the most common choice. Select your Button. In the General tab, open the ScrollTo section. Turn on Enable Scroll To. In Target Selector | Number, type #features. Use # followed by the ID you chose. Click Update to save your page. ScrollTo section (click to zoom) The options after you turn on Enable Scroll To (click to zoom) Tip: Scroll To replaces the normal click of the element. The button’s own link does not open. SETTINGS Options Enable Scroll To Default: OffTurns Scroll To on for this element. You can set it for each device. Target Selector | Number Default: #section-idWhere to scroll. Type a selector like #features or .my-section. You can also type a number, which is a position in pixels from the top of the page. 0 goes to the top. Scroll Duration Default: 1How many seconds the scroll takes. Scroll Ease Default: Power2 OutHow the scroll speeds up and slows down. See the list below. Scroll Ease Power1 Out A gentle slow-down at the end. Power2 Out A smooth, natural slow-down. This is the default. Power3 Out A stronger slow-down at the end. Expo Out Starts very fast, then glides to a stop. Bounce Out Lands on the section and bounces a little. The Scroll Ease list (click to zoom) RESULT Final Result A menu with four buttons at the top of a page. Each button has its own Target, Duration and Ease. The GIFs show one click each. Features button Target is #features. Duration is 1.2 and Ease is Power2 Out. A smooth scroll to the Features section Pricing button Target is #pricing. Duration is 1.5 and Ease is Expo Out. Expo Out starts fast and glides to the Pricing section Contact button Target is #contact. Duration is 2 and Ease is Bounce Out. Bounce Out lands on the Contact section with a small bounce Back to top button Target is the number 0, which means the top of the page. A number as the target scrolls to that position GOOD TO KNOW How It Works Page link updates When the target starts with #, the address in the browser changes to match, for example /page/#pricing. Visitors can share that link. Link opens at the section If a visitor opens a page link that ends with the target, for example /page/#pricing, the page scrolls to that section when it loads. Per device All settings can be different on desktop, tablet and mobile. Only loads when used Pages with no Scroll To element do not load any extra script. HELP Troubleshooting I do not see the ScrollTo section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Interaction and turn on Scroll To. Then reload the editor and select an element. Nothing happens when I click Make sure Enable Scroll To is on and the page is updated. Pro must be active with a valid license. Test on the live page, not in the editor. The page does not scroll to my section Check that the section has the same ID as your target. If the ID is features, the target must be #features. IDs are case sensitive and cannot have spaces. It stops a little too low or too high The page scrolls so the target touches the top of the screen. If you have a fixed menu, the menu covers the top of the section. Add some top padding to the section to make up for it. You Did It Your button now glides to the section you chose. If you face any problem, please contact our support team. We are happy to help.
