Freebies
Discover products first on our webflow account. Learn More
Guide / Article

How to add smooth scroll to webflow website

Flowbase
September 19, 2020
How to add smooth scroll to webflow website

Webflow Smooth Scroll (luxy.js)

Add the popular interia scroll effect to your own webflow projects.

This guide uses luxy.js - and you can read more about it here.

https://min30327.github.io/luxy.js/

Please note: Luxy is not super effective with advanced positioning such as sticky elements.

Add Luxy Script

Firstly, you will want to add the following script to the custom code section of either your page, or project settings.

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>
<script charset="utf-8">  
var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
     luxy.init({
       wrapper: '#luxy',
       wrapperSpeed: 0.065,
     
   });
}
</script>

Add a div-block to wrap the entire page.

Give that div an ID of luxy

Flowbase
September 19, 2020

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.