This article shows you how to make buttons, links or menu items scroll to a specific section of your website or funnel page. It's a great way to improve the visitor experience and make your pages easy to navigate.
What is Scroll to Element?
Scroll to Element lets you link any clickable item to a specific section on a page. It makes your pages more dynamic and easier to use. It works especially well on landing pages and long pages.
Key benefits of Scroll to Element
Scroll-to actions help you guide visitors through your page and create smooth interactions.
Navigation control: Send visitors to a specific section of the page without reloading it.
Cleaner experience: Guide visitors through your content smoothly, which helps reduce bounce.
Custom interaction: Works with buttons, text links and navigation menus.
Optimised for CTAs: Great for "Jump to Pricing" or "Learn More" buttons.
Mobile friendly: Scrolling works smoothly on all devices.
Smooth scrolling
Scroll-to-element actions use smooth scrolling instead of an abrupt jump.
When a visitor clicks a button, text link or navigation menu item set up with "Scroll to Element", the page glides smoothly to the chosen section. This feels more natural and looks better, especially on long pages.
You don't need to set anything up. Smooth scrolling is applied automatically to all scroll-to-element actions on your funnels and websites.
Setting up Scroll to Element
To scroll to a section, you link to it using its selector. Once you've copied the selector, you can use it with text, buttons or menu items.
Step 1: Copy the CSS selector
Every scroll-to setup starts with getting the selector of the section you want to scroll to. You'll add this selector to the end of your link in Step 2.
Open your funnel or website in the builder.
Click the section you want to scroll to.
In the right-hand panel, go to the Advanced tab.
Copy the value shown in the CSS Selector field.
Step 2: Choose a scroll method
Now that you have the CSS selector, choose one of the methods below to make the page scroll when visitors click.
Method 1: Link text to a section
Turn text into a clickable scroll link using the selector you copied.
Highlight the text you want to link.
Click the Link icon in the formatting toolbar.
Enter your full page URL followed by the CSS selector you copied. (Example: www.yourdomain.com/#section_abc12)
Method 2: Use a button with a URL link
Scroll to a section by giving a button a direct URL.
Select the button in the builder.
Under Button Actions, click the Link To dropdown and choose Website URL.
Enter your full page URL followed by the CSS selector you copied. (Example: www.yourdomain.com/#section_abc12)
Method 3: Use a button with the Scroll to Element action
Scroll to a section using ZipLeads' built-in scroll behaviour.
Select the button in the builder.
Under Button Actions, click the Link To dropdown and choose Scroll to Element.
Use the dropdown to select the section you want the button to scroll to.
Method 4: Make a navigation menu item scroll
You can also set up navigation menu items to scroll to a section of the page.
Select the Navigation Menu.
Click the three dots next to a menu item.
Change the Go to field to Go to website URL.
Enter your full page URL followed by the CSS selector you copied. (Example: www.yourdomain.com/#section_abc12)
Click Submit.
Frequently Asked Questions
Q: Can I scroll between different funnel steps?
No. Scrolling only works within the same page.
Q: Will this work on mobile?
Yes, scrolling works on all devices.
Q: My scroll isn't working. What should I do?
Check that your selector is correct and that it starts with #. Refresh the page and test again. If it still doesn't work, contact the ZipLeads support team.
Q: What happens if more than one section has the same CSS selector?
Only the first match is used. Make sure each section you scroll to has its own unique selector.