How to Add Smooth Scrolling to Webflow Website

Overview

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, but is very much a stylized effect that shouldn't be overused.

To add this into your project, follow the simple steps and add the custom code into your project or page settings.

Instructions ✍️

1. Add the custom code into your page settings.

Firstly, you will want to add the script to your page, or project settings. You can add this into the before </body> section of your code section.

2. Add a div-block that wraps all elements on your page

Add a div-block to your page and this will be used to wrap all our page elements.

3. Make sure the div-block has the #ID 'luxy'

Add the #ID luxy to your main page wrapper. All elements inside the wrapper will have this smooth scroll effect.

Did you find this useful? 💕

Your support means the world to us! In just 10 seconds, you can make a big difference:

• Join our community Discord Channel.
• Download our Free Webflow Booster App.
• Share what you built with us on Twitter! We re-post to thousands!

Thank you for being awesome! 🌟