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 when you have an anchor link that you want to jump to quickly from any part of your page. This is a great feature to add to your page to get your customer to that conversion button right away.

anchor-link-smooth-scrolling.gif

Here is a tutorial on how to set up your anchor links with smooth scrolling: 

 

Creating Your Anchor Links

    1. Locate the element, section, or Unbounce form you would like to set up the anchor link.
    2. Click on this element, then navigate to the Element Metadata section at the bottom of the Properties tab on the builder's right side.
      anchor-link-element-id.jpg
    3. Select & copy the ID value of this element. We’ll use this to create our Anchor Link.

If you’re using an Unbounce Button for your anchor link:

  1. Click on the button to which you’d like to add a smooth scrolling link.
  2. On the builder's right side, navigate to the Properties tab and scroll down to the Click Action tab.
  3. Using the URL field, type the # symbol, and paste in the ID valueanchor-link-and-buttons.jpg

If you’re using a piece of text as your anchor link:

  1. Double-click the text block and select the text that you’d like to turn into a link.
  2. On the builder's right side, navigate to the Properties tab, 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 Publish/Republish Your Page.

Smooth scrolling anchor links should be set up on your page making navigation on your page easier for your customers!

Add 'Smooth Scrolling' using Javascript

Note:

To use this custom smooth scrolling feature, you must first install jQuery, which is required for this script to work (set the placement to the Head). 

  1. Locate and open the Unbounce builder for the page you’d like to add smooth scrolling to.
  2. Click on the Javascripts javascripts_button.png widget at the bottom-left corner of the Builder. A new dialog box will appear.
  3. In the Manage Scripts dialog box:
    1. Add Smooth Scrolling to the Link Name field.
    2. Select Before Body End Tag from the Placement menu.
    3. Paste the script below into the blank field.
  4. Click the Save Code button in the bottom right corner of the dialog box. 
  5. 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. 
  6. Be sure to Save and Publish/Republish your page. 

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).

Now that you’ve added the Javascript, you can create smooth scrolling text links and buttons within the page that link to an anchor.

Glossary

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

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply