Smooth scrolling allows you to easily jump between areas of your page without scrolling up and down, looking for specific sections manually. Smooth scrolling works great with anchor links as well. Check out this example below:
This article will explain how to set up anchor links on your landing page in the Classic Builder, and, how to add a smooth scrolling feature for a more seamless experience. There are three key steps.
- Locating your Element ID
- Creating the Anchor Links with the Element ID
- Adding the Smooth Scrolling feature (Optional)
Here is a tutorial on how to set up your anchor links with smooth scrolling:
Locating your Element ID
The first step is to locate & copy the unique identifier (ID) of the section, element, or form you'd like the anchor link to scroll down to.
- In the builder, navigate to the element, section, or Unbounce form you want the anchor link to redirect your visitors to.
- In this example, the anchor link should scroll down to the form on the page. So, we will need to locate the element ID of the form.
- Single-click the element to bring up its properties within the Properties tab.
- Within the Properties tab on the right-hand side, scroll down to the Element Metadata section, and locate the ID of the element. In this example, it's a section with the ID #lp-pom-block-24:
- Copy the ID of this element. You'll need this in the next step to create the Anchor Link.
Creating the Anchor Links
In this step, we'll link the ID (from step 1) to the anchor link. You can create anchor links in the form of buttons or text.
To add an anchor link to a button,
- Select the button within the builder.
- Navigate to the Properties tab on the right-hand side and scroll down to the Click Action section.
- Using the URL field, type the # symbol, then paste in the ID value from step 1:
To add an anchor link to text,
- Double-click the text block and select the text that you’d like to turn into a link.
- Or, highlight the specific text you want to add the anchor link to.
- Navigate to the Properties tab on the right-hand side, then select the Action tab.
- Using the URL field, type the # symbol, and paste in the ID value:
- Set the Target to Same tab or window.
Click Save and be sure to Publish/Republish your page.
To test your anchor link, navigate to the Preview mode, or visit your live landing page.
Click on the text or button you've linked with the element ID. The anchor link will redirect to the specific section ID as added in step 1.
Now that you've set up your anchor link, you have the option of adding in the smooth scrolling feature to seamlessly guide your visitors to that page section. This also requires two steps.
Add 'Smooth Scrolling' to Anchor Links (Optional)
Step 1: Install jQuery
Follow our documentation for steps on how to install jQuery onto your landing page.
Step 2: Install the Smooth Scrolling script
- In the dialog box that appears, enter the following:
- Type Smooth Scrolling script as the Script Name.
- Select Before Body End Tag from the Placement menu.
- Paste the script below into the blank field:
- Click the Done button in the bottom right corner of the dialog box.
- As mentioned in the above note, remember to include the jQuery script in a new script box and the placement set to the Head. The smooth scrolling script will only work alongside jQuery.
- Be sure to Save and Publish/Republish your page.
You're all set!
To test out smooth scrolling on your page, navigate to the Preview mode, or view your published page, and test out the anchor link again. It should redirect to the section of your page in a smooth & gradual way.
Custom scripts & CSS will only run in Preview mode or on a published page (and not in the builder).
Anchor link: A link on a page that brings you to a specific place on the same page.