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:
- Access your Webflow project and open the page settings.
- 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:
- 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.
- Select the div-block you added earlier, which wraps all your page elements.
- In the element settings, assign the #ID 'luxy' to this div-block.
Enjoy your smoother website scrolling!