Return to articles
How to add smooth scroll to webflow website
Tutorials

How to add smooth scroll to webflow website

Learn how to add smooth scrolling to your webflow site, for a modern intertia type effect.

Flowbase
February 25, 2020

Webflow Smooth Scroll (luxy.js)

Luxy.js is a popular inertia (a.k.a momentum) scroll effect that causes your websites scrolling to gradually slow to a stop as opposed to stopping immediately. This can be used to make your sites scrolling experience feel smoother and less jarring. Better yet, there are only three super simple steps required.

1. Add Luxy Script to your sites custom code

Firstly, you will want to add the following script to your page, or project settings.

<script>
<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>
<script charset="utf-8">  </script>
var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
     luxy.init({
       wrapper: '#luxy',
       wrapperSpeed: 0.065,
     
   });
}
</script>
Increasing the value in wrapperSpeed will increase the inertia scroll speed.
Adding script to a pages body

Adding script to the projects settings footer

2. Add a div-block to wrap the entire page

You can name this whatever you like - for the purposes of this example we will use “Smooth Wrapper”.

Wrapping all the pages content in a div block called "Smooth Wrapper".
Elements with advanced positioning such as fixed and sticky elements will not work with this script if they are inside the "Luxy" wrapper. You will need to place those elements outside of the luxy wrapper.

3. Give that div an ID of luxy

The correct name is important here, because the script will look for a div with the ID of "luxy".

Giving the div wrapper an ID of "luxy".

That’s it!

Three super simple steps. 

Remember to publish and view the live site to see your custom code in action.

This guide uses luxy.js - you can read more about it here. There are many other inertia scroll effect plugins which can be used. Check out CJHersh project which compares six common plugins commonly used for achieving inertia scrolling.


ABOUT THE AUTHOR
Flowbase

Flowbase is the leading company for Webflow resources. We provide customers a collection of premium and free resources that help them build better products with Webflow.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.