How to add smooth scrolling to a website (Wix, WordPress and Next.js)

Smooth scrolling eases the page toward its destination instead of jumping with each wheel tick. Used with restraint it makes a site feel refined. Used badly it feels sluggish and can make some visitors uncomfortable. This guide shows how to add it with Lenis, a small open-source library, and how to keep it accessible.

Decide whether you need it

• It suits portfolio, agency and campaign sites with animated sections.
• It is usually unnecessary on documentation, forms or content-heavy pages.
• Always respect visitors who ask their device to reduce motion.

Next.js

Install the package, create a client component that starts Lenis, and render it once in your layout.

npm install lenis

"use client";
import { useEffect } from "react";
import Lenis from "lenis";

export function SmoothScroll() {
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const lenis = new Lenis({ duration: 1.1 });
    let id = requestAnimationFrame(function raf(t) {
      lenis.raf(t);
      id = requestAnimationFrame(raf);
    });
    return () => { cancelAnimationFrame(id); lenis.destroy(); };
  }, []);
  return null;
}

WordPress

Add the library from a CDN in your theme's footer or with a small plugin that injects code. In a child theme, enqueue the script and initialise it after it loads.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
<script>
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
    const lenis = new Lenis({ duration: 1.1 });
    requestAnimationFrame(function raf(t){ lenis.raf(t); requestAnimationFrame(raf); });
  }
</script>

Pin a specific version rather than using a floating one, and test with your page builder. Some builders add their own scroll scripts that can conflict.

Wix and Wix Studio

Wix lets you add custom code to a site on plans that support it. Look for the Custom Code area in your site settings and add the same snippet as above to the page body or footer. Menus and locations change over time, so check Wix's current documentation for exact steps. Test on mobile, where native scrolling is usually better.

Accessibility and pitfalls

• Disable smooth scrolling when the user prefers reduced motion, as shown above.
• Keep keyboard navigation working. Tab focus should still scroll elements into view.
• Let modals and menus lock scroll while they are open, or the page will scroll behind them.
• Do not combine multiple smooth-scroll libraries on one page.
• Make anchor links use the library's scroll method, and leave space for a fixed header.

If you want motion that feels intentional across the whole site, not only the scroll, that is part of our web design work and our UI/UX design process.