If you’re looking to add smooth scrolling into your unbounce landing page template! Don’t worry here is a solution.
To add the smooth scrolling Script into unbounce, follow these steps:
Here’s how and where to add codes. Once you’ve opened or created your landing page template, you can access the JavaScript manager by clicking on the “JavaScript” button in the bottom left-hand corner of the screen.
1. Click on “JavaScript” and then click “Add”. Open the following script editor.
There, you should be able to add or edit any of the following codes.
2. Paste this code:
<script>
jQuery(function($) {
// The speed of the scroll in milliseconds
const speed = 1000;
// Find links that are #anchors and scroll to them
$('a[href^="#"]')
.not('.lp-pom-form .lp-pom-button')
.unbind('click.smoothScroll')
.bind('click.smoothScroll', function(event) {
event.preventDefault();
const href = $(this).attr('href').split('#');
$('html, body').animate({ scrollTop: $(`#${href[1]}`).offset().top }, speed);
});
});
</script>
3. Set the placement to “Before Body End Tag“.
4. Name your script “Smooth Scrolling” or something else to help identify it.
5. Now Save Code the JavaScript manager.
6. Save and publish! the page will be ready to go now .
Testing:
After adding the script code, the smooth scroll effect will work automatically in the published page.
Conclusion:
This is an incredibly easy way to add smooth scrolling to your landing page which will make more beautiful and professional. Be sure to let us know in a comment how it works for you! We hope its help you lots, Thank you.
Check out some services that will help you to complete your unbounce project :
HTML to Unbounce Landing Page Conversion
