Add Smooth Scrolling to Joomla

Many Joomla templates, including Cassiopeia, smooth out jumps to anchor links with the CSS scroll-behavior property. That property only affects links and scripts, so the mouse wheel still moves the page in hard steps. The Lenis library eases every wheel and trackpad scroll, so long pages glide to a stop. You can add it to your Joomla site with one HTML snippet in Code Snippets.

The snippet code

This HTML snippet loads Lenis from the jsDelivr CDN and starts it with settings that suit most Joomla sites. It smooths the mouse wheel, the trackpad, and clicks on anchor links, and it leaves scrollable menus and modals alone.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.css">
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>
<script>
  window.lenis = new Lenis({
    // Smoothness: lower is smoother and slower. Try values between 0.05 and 0.2.
    lerp: 0.1,
    // Smooth scroll to #anchor links too.
    anchors: true,
    // Let menus, modals and other scrollable boxes scroll normally.
    allowNestedScroll: true,
    // Pause smooth scrolling while a modal or menu locks the page.
    autoToggle: true,
    // Stop any leftover scroll movement when a link is clicked.
    stopInertiaOnNavigate: true,
    // Run the animation loop automatically.
    autoRaf: true
  });
</script>

To change how it feels, adjust lerp. A lower value like 0.05 glides for longer, and a higher value like 0.2 feels snappier.

Lenis respects your visitors' accessibility settings. When someone has turned on reduced motion in their operating system, scrolling stays instant. On phones and tablets, touch scrolling keeps working the way the device normally does it.

How to add this snippet

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Smooth scrolling.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Site Footer.
9. Paste the code above into the editor.
10. Click Save & Close.

Loading the snippet in the footer lets your page appear first, then smooth scrolling switches on a moment later.

Check that it works

1. Open a long page on your site.
2. Scroll with your mouse wheel.

The page should keep gliding for a moment and ease to a stop after each turn of the wheel.

If something stops scrolling

A few elements need native scrolling, like a scrollable dropdown or a chat window. The snippet already lets most of them scroll normally. If one still gets stuck, add the data-lenis-prevent attribute to it:

<div class="chat-messages" data-lenis-prevent>
  ...
</div>

Over an embedded video or map, the wheel may scroll the page without smoothing. Those embeds don't pass wheel events on to the page, so Lenis can't smooth them.

To learn more about HTML snippets, read the HTML snippet docs.