Adding Smooth Scrolling Links and Buttons for Anchor Links in Unbounce

Step 1: In order to use this custom script, you must first install jQuery. 

 

     <script src="https://code.jquery.com/jquery-3.5.1.min.js"   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="   crossorigin="anonymous"></script>

 

Step 2: Add the smooth scrolling javascript

Step 3: Create your smooth scrolling anchor links

Add the Smooth Scrolling Javascript

Paste the script below into the blank field.

1. Add Smooth Scrolling to the Link Name field.
2. Select Before Body End Tag from the Placement menu.
3. In the Manage Scripts dialog box:

1. Navigate to the page where you’d like to add smooth scrolling and open the page in the Unbounce Builder.
2. Click on the Javascripts  button in the bottom left corner of the Builder. A new dialog box will appear.
3. In the Manage Scripts dialog box:

 

 <script>

jQuery($ => {

// The speed of the scroll in milliseconds

const speed = 1000;

$('a[href*="#"]')

.filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))

.unbind('click.smoothScroll')

.bind('click.smoothScroll', event => {

const targetId = event.currentTarget.getAttribute('href').split('#')[1];

const targetElement = document.getElementById(targetId);

if (targetElement) {

event.preventDefault();

$('html, body').animate({ scrollTop: $(targetElement).offset().top }, speed);

}

});

});

</script>  

 

 

4. Click the Save Code button in the bottom right corner of the dialog box. 

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

 

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, type the # symbol, 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, type the # symbol, 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! 

 

Credit: https://unbounce.com/