Skip to main content

Here’s a script that allows you to apply a quick, beautiful smooth scrolling animation to any landing page using the SmoothScroll.js library. A great example of this can be found on:


Marketer - Premium Marketing Unbounce Template (below).



You can see the final product built in Unbounce here:


http://unbouncepages.com/marketer-click-through/


**************************

WARNING: YOU ARE ENTERING DEVELOPER TERRITORY

Please note: This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with Javascript, please consider consulting an experienced developer.

**************************


Scripts Needed:


Grab the latest javascript here (ÒSmoothScroll.min.jsÓ):

https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.min.js


Instructions:


Step 1. Click on the ÒJavascriptsÓ button then ÒAdd New JavascriptÓ.


Step 2. Add a name for the new script (for example: Smooth Scroll) and set the placement to ‘Before Body End Tag’


Step 3. Paste the script into the javascript textarea and make sure to surround it with opening and closing ÒscriptÓ:


// Add the script code here


Step 4. Click ÒSave the codeÓ and the page will be ready to go now 🙂


Testing:


After adding the script code, the smooth scroll effect will work automatically in the preview and the published page.


Features:




  • Picasa-like smooth scrolling




  • Mouse wheel, middle mouse and keyboard support




  • Arrow keys, PgUp/PgDown, Spacebar, Home/End




  • Customizable step sizes, frames per second and more…




  • Works with embedded content (PDF, flash)




  • Full touchpad support




  • Excluded pages list





Advanced Options:


If you want to apply advanced options to the plugin you can use the provided API, for more information check the wiki page from here:


https://github.com/galambalazs/smoothscroll-for-websites/wiki


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 how it works for you!

Did not work for me

 

Did not work for me

Hey, I just tested it. I tried and it failed on me as well...that’s when I caught it...the ÒscriptÓ (unfortunate formatting)

Before pasting the code. It just requires the <script> before the code and </script> at the end of the code. It works now, quite interesting!

Looks like something below, the code just needs a script hug. :

<script>

08 copy and paste the code ]]

</script>
 

Good luck!
 

Thank you Howie! I tried it, but it still doesn’t seem like it’s working...

Reply


Terms & ConditionsCookie settings