Adding Smooth Scrolling Links and Buttons for Anchor Links

Follow

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 very well with anchor links, which allow you to quickly jump from any part of your page to another:

anchor-link-smooth-scrolling.gif

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 identifier (ID) of the section, element, or form you'd like the anchor link to scroll down to. 

  1. 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. 
  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:
    anchor-link-element-id.jpg
  4. Copy the ID value of this element. You'll need this later to create the Anchor Link.

Creating the Anchor Links

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:anchor-link-and-buttons.jpg

To add an anchor link to a piece of 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.
  3. Using the URL field, type the # symbol, and paste in the ID value:anchor-links-and-text.jpg

Click Save and be sure to Publish/Republish your page.

Now that you've set up your anchor link, you can add in the smooth scrolling feature to easily redirect your visitors to that page section.

Add 'Smooth Scrolling' to Anchor Links

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 javascripts_button.png 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, open up the Preview mode, or view your published page. 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.