Smooth scrolling allows you to jump between areas of your page easily without having manually scroll up and down looking for specific sections. Smooth scrolling works very well when you have an anchor link that you want to be able 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.
If you’d just like to add an anchor link, skip step 1 of this tutorial and go directly to step 2. However, including the smooth scroll script adds a pleasant animation to the link jump and adds some pizzazz to your page.
Click here to see smooth scrolling in action!
To add smooth scrolling links to your page, we’ll need two steps:
- Navigate to the page where you’d like to add smooth scrolling and open the page in the Unbounce Builder.
- In the Manage Scripts dialog box:
- Add Smooth Scrolling to the Link Name field.
- Select Before Body End Tag from the Placement menu.
- Paste the script below into the blank field.
- Select jQuery 1.4.2 under Script Libraries in the bottom left corner of the dialog box.
- Click the Save Code button in the bottom right corner of the dialog box.
Create Your Smooth Scrolling Anchor Links
Click on the item that you would like to link to, then find the ELEMENT ID section in the bottom of the Properties tab on the right side of the page.
Select and Copy the ID value from the ELEMENT ID section. We’ll use this to create our Anchor Link.
- If you’re using a button for your link, click on the button to which you’d like to add a smooth scrolling link. Go to the Properties tab and paste the ID value into the CLICK ACTION section URL form field.
- If you’re using a text link, double click into the text block and select the text that you’d like to turn into a link. Under the Properties Tab, select the Action tab and paste the ID into the URL form field.
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!
Anchor link: A link on a page that brings you to a specific place on the same page.