[Tips & Scripts] Buttery Smooth Scrolling


#1

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 :slight_smile:

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!


Full Screen Page Section Scrolls
Can a CTA button jump to a form on the same page?
Landing page feedback for a web services company