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

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

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.