---
title: "Add Smooth Scrolling to Joomla - Code Snippets"
description: "Make every mouse wheel and trackpad scroll on your Joomla site glide smoothly for a more polished feel, using one HTML snippet."
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/smooth-scrolling"
date: "2026-10-22T22:25:32+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Code Snippets ](https://www.tassos.gr/docs/code-snippets) / [ How-to Guides ](https://www.tassos.gr/docs/code-snippets/howto) / [ User Experience ](https://www.tassos.gr/docs/code-snippets/howto/user-experience)

#  Add Smooth Scrolling to Joomla

##  Make every mouse wheel and trackpad scroll on your Joomla site glide smoothly for a more polished feel, using one HTML snippet.

 ![Add Smooth Scrolling to Joomla](https://www.tassos.gr/images/2026/10/code-snippets-smooth-scrolling-card.png)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](https://github.com/darkroomengineering/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](#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](#how-to-add-this-snippet)

1. Install [Code Snippets](https://www.tassos.gr/docs/code-snippets/getting-started/how-to-install) 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](#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](#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](https://www.tassos.gr/docs/code-snippets/types/html).

 Last updated on Oct 15th 2026 12:10