Back to Blog

How to Add Smooth Scrolling to Webflow Website

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

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.

{{ Template "gist" "text:Before </body> tag" "id:904096d55fdc9f00fa5cd2ce47a6045a" }}

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.

OTHER GUIDES & LESSONS

Boost your webflow site further.

Join Over 30,000
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 30,000+ other creators across our communities.