How to add a website smooth scroll

Luxy and Sticky Elements: A Heads-Up

Before we dive into Luxy integration, it's essential to note that sticky elements might require adjustments when used alongside Luxy. Sticky elements are components that stay fixed while you scroll, and achieving harmony between them and Luxy may need some tweaks.

Step 1: Add Custom Code

To begin with Luxy, follow these steps:

  1. Access your Webflow project and open the page settings.
  2. In the custom code section, insert the Luxy script below just before the closing </body> tag.

Step 2: Wrap Your Page Elements

Create a div-block to enclose all the elements on your page. This div-block acts as the canvas for Luxy. Here's what you need to do:

  1. Add a div-block to your Webflow page, and this block will serve as a container for all your page elements.

Step 3: Assign the #ID 'luxy'

For Luxy to work seamlessly, give your main page wrapper a specific identifier: #luxy. This ID tells Luxy that all elements within this wrapper should have the smooth scrolling effect.

  1. Select the div-block you added earlier, which wraps all your page elements.
  2. In the element settings, assign the #ID 'luxy' to this div-block.

Enjoy your smoother website scrolling!

<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>

Copy code here

Explore More.

Spline & Webflow Tutorial
3D Interactive
Spline & Webflow Tutorial
clone
watch
Vertical Split Slider
Web Development
Vertical Split Slider
clone
Text Animations
Web Development
Text Animations
clone