Adding Anchor Links & Smooth Scrolling in the Classic Builder

Anchor links allow you to easily jump between areas of your page without scrolling up and down, looking for specific sections manually.

While adding a smooth scrolling feature to your anchor links seamlessly scroll down the page, instead of a sudden jump from one section to another. 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 to your anchor links. There are three key steps: 

1. Locating your Element ID
2. Creating the Anchor Links with the Element ID
3. 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. 

1. In the Classic 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, you will need to locate the element ID of the form. 
2. Single-click the element to bring up its properties within the Properties tab.
3. 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:
     
     
4. 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, you will link the ID (from step 1) to the anchor link. You can create anchor links as either buttons or text elements. 

To add an anchor link to a button,

1. Select the button within the builder. 
2. Navigate to the Properties tab on the right-hand side and scroll down to the Click Action section.
3. Using the URL field, type the # symbol, then paste in the ID value from step 1:

To add an anchor link to text,

1. 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.
2. Navigate to the Properties tab on the right-hand side, then select the Action tab.
   • Not seeing the Action tab? Be sure that you double-click or highlight the text for the Action tab to appear. 
3. Using the URL field, type the # symbol, and paste in the ID value:
4. Set the Target to the 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. 

Remove the Blue Underline from Text Links

You may notice that the hyperlinks appear with a blue underline. You can remove this styling by adding a bit of CSS to your landing page. 

See our documentation to learn more: How Do I Remove the Underline from My Text Links?

Add 'Smooth Scrolling' to Anchor Links (Optional)

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. 

Step 1: Install jQuery

To use this custom smooth scrolling feature, you must first install jQuery in the builder, a JavaScript library required for this script to work (set the placement to the Head). 

Follow our documentation for steps on how to install jQuery onto your landing page. 

Step 2: Install the Smooth Scrolling script 

1. Click on the Javascripts  widget at the bottom-left corner of the Builder, and click the + Add New JavaScript button. 
2. 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:
     
3. Click the Done button in the bottom right corner of the dialog box. 
4. 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. 
5. 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).

Glossary

Anchor link: A link on a page that brings you to a specific place on the same page.