Info
Adds smooth Lenis-powered scrolling for anchor links, replacing the default jump behavior for a smoother, more fluid experience.
Required
Setup
Add Custom Javascript
Paste the script through Elementor → Custom Code and set it to load after the closing body tag.
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("data-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)
});
});
});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.
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.
const anchorDuration = 1.2; // Anchor scroll durationAnchor Offset
The anchorOffset uses a pixel value (for example 80) to control how far from the top the scroll stops, helping avoid overlap from sticky headers. By default, it is set to 0.
You can also set a custom offset for a specific anchor link by adding the data-lenis-anchor-offset="VALUE" attribute directly to the anchor link element (e.g. button or link text).
const anchorOffset = 0; // Anchor offset from top