---
title: "Add a Back to Top Button in Joomla - Code Snippets"
description: "Long articles, category listings, and documentation pages leave readers stranded at the bottom, scrolling for several seconds just to reach your menu"
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/back-to-top-button"
date: "2026-09-17T03:22:13+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Code Snippets ](https://www.tassos.gr/index.php?option=com_content&view=category&id=120) / [ How-to Guides ](https://www.tassos.gr/index.php?option=com_content&view=category&id=125) / [ User Experience ](https://www.tassos.gr/index.php?option=com_content&view=category&id=143)

#  Add a Back to Top Button in Joomla

Long articles, category listings, and documentation pages leave readers stranded at the bottom, scrolling for several seconds just to reach your menu again. On mobile that is enough friction to make them close the tab instead. A back to top button in Joomla solves it with one small floating control, and you don't need a plugin or a template override to add one. You can add a back to top button to your Joomla site using Code Snippets.

## [The Snippet Code](#the-snippet-code)

This single HTML snippet contains everything the button needs: the markup, its styling, and the script that shows it after the visitor scrolls down. It appears once the page is scrolled 300 pixels, scrolls smoothly back to the top when clicked, and stays out of the way otherwise.

 ```
<button id="tcs-back-to-top" type="button" aria-label="Back to top">↑</button>

<style>
#tcs-back-to-top {

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #111827;

    color: #fff;

    font-size: 20px;
    line-height: 44px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

#tcs-back-to-top:hover {

    opacity: .85;
}
</style>

<script>
(function () {
    var button = document.getElementById('tcs-back-to-top');

    if (!button) {
        return;
    }

    window.addEventListener('scroll', function () {
        button.style.display = window.scrollY > 300 ? 'block' : 'none';
    });

    button.addEventListener('click', function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
})();
</script>
```

To move the button to the left, swap `right: 20px` for `left: 20px`. To match your brand, change the `background` colour.

## [How to add this snippet](#how-to-add-this-snippet)

1. Install **Code Snippets** if it is not installed already.
2. Go to Joomla Administrator.
3. Open **Components → Code Snippets**.
4. Click **New**.
5. Give your snippet a descriptive title like "Back to Top Button".
6. Select **HTML** snippet type.
7. Paste the back to top button code above.
8. Select **Site Footer** as the "Insertion Method".
9. Publish the snippet.
10. Optionally, open the **Conditional Logic** tab to show the button only on long pages such as articles or blog views. Leave it empty to run it site-wide. Learn more in [Using Conditional Logic.](https://www.tassos.gr/docs/code-snippets/functionality/conditional-logic)

[ ](https://www.tassos.gr/docs/code-snippets/functionality/conditional-logic)

 [Congrats! You've successfully added a back to top button to your Joomla site without installing another plugin.

 ](https://www.tassos.gr/docs/code-snippets/functionality/conditional-logic)

 Last updated on Sep 3rd 2026 12:09