Smooth scrolling allows for a refined look that improves how pages are accessed. Smooth scrolling makes your page scroll more gradually and looks much more polished than a quick jump. You can do this in Webflow easily, even if you don’t know a lot of coding. For your portfolio, landing page or multi-section website, adding smooth scrolling helps users find what they want and improves the look of the site. In this tutorial, you’ll learn how to easily incorporate smooth scrolling into your Webflow site for a better look and feel.
Overview 📚
This guide will explain how to add smoothness to scrolling on your Webflow site. You will discover how to add Webflow’s smooth scroll function and later can use some simple code to control this behavior even more. We’ll talk about the best times to use smooth scrolling, why this matters for users and how to ensure everything runs efficiently on any device. It doesn’t matter if your website is simple or has complex anchor links—this step-by-step guide will help you get a website with great, professional smooth scrolling.
Instructions ✍️
1. Add the custom code into your page settings.
To start, put the script on to your page or project settings. Insert it into the before </body> section to get the effect.
<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>
2. Add a div-block that wraps all elements on your page
Inside your page, put a div-block because it will house all your page elements.
3. Make sure the div-block has the #ID 'luxy'
Include the #ID luxy to your wrapper container on the main page. Everything wrapped with the code will be affected by the smooth scroll effect.
FAQ'S
How to Add Smooth Scrolling to Webflow Website : 1 min guide
Does Webflow have built-in smooth scrolling features?
How can I add custom smooth scrolling to my Webflow project?
Will smooth scrolling affect my site’s performance?
Can I customize the speed and easing of smooth scrolling in Webflow?
We make websites that bring joy and meet your goals.
We create digital experiences that not only capture the users but also empower businesses in a highly competitive world. We are dedicated towards developing creative solutions that will easily fuse creativity with functionality, with long-lasting effects.
