Details
Overview
This script smooths anchor navigation with Lenis, turning abrupt jumps into fluid, controlled scroll transitions that feel deliberate and refined.
Setup
Add External Scripts
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Add HTML
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Add Custom CSS
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
Add Custom Javascript
Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
document.addEventListener("DOMContentLoaded", () => {
if (document.body.classList.contains("elementor-editor-active")) return;
const lenis = window.ouLenis;
if (!lenis) return;
const anchorDuration = 1.2; // Anchor scroll duration
const anchorOffset = 0; // Anchor offset from top
document.addEventListener("click", e => {
const link = e.target.closest('a[href^="#"]');
if (!link) return;
const href = link.getAttribute("href");
if (href === "#" || !href.startsWith("#")) return;
const target = document.querySelector(href);
if (!target) return;
e.preventDefault();
const customOffset = link.getAttribute("ou-lenis-anchor-offset");
const offset = customOffset !== null ? parseInt(customOffset, 10) : anchorOffset;
lenis.scrollTo(target, {
duration: anchorDuration,
offset: offset,
easing: t => 1 - Math.pow(1 - t, 3)
});
});
});Add Custom PHP
Place the PHP snippet in your theme’s functions.php file or add it using a code snippets plugin to enable the logic.
Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
Implementation
These options control how anchor scrolling behaves.
Anchor Duration
The anchorDuration value is a number in seconds (for example, 1.2) and defines how long the anchor scroll animation takes, with higher values creating slower, more cinematic movement and lower values keeping it quick and direct.
Anchor Offset
The anchorOffset value is a number in pixels (for example, 80) and controls how far from the top the scroll stops when navigating to an anchor, which is useful when a sticky header might otherwise overlap the target section.
You can also override the offset for individual anchor links using the attribute ou-lenis-anchor-offset="VALUE".
This attribute should be added to the anchor link itself (for example a button or text link), not the section with the ID.
Example usage:
- Link to
#featureswithou-lenis-anchor-offset="120"will stop the scroll 120px before the section. - Link to
#pricingwithou-lenis-anchor-offset="200"will stop the scroll 200px before the section.