How To Add Back To Top Button In Magento 2

A “Back to Top” button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you’ll learn how to add a fully customizable button to your Magento 2 store using only admin panel features—no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.

Steps To Add Back To Top Button In Magento 2

1. Create a CMS Static Block for the Button

We’ll build everything inside a single CMS block that includes the HTML, CSS, and JavaScript for the button.

Navigate to Content > Blocks > Add New Block.

Fill in the following:

• Block Title: Back to Top Button
• Identifier: back_to_top_button
• Store View: Select as needed

Click Edit with Page Builder button and drag a HTML Code.

And insert code below:

<style>
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #333;
    border-radius: 8px;
    cursor: pointer;
    z-index: 9999;
    transition: background-color 0.3s ease;
    display: none; /* Initially hidden */
}

#back-to-top .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

#back-to-top:hover {
    background-color: #555;
}
</style>

<div id="back-to-top" title="Back to top">
    <div class="inner">&uarr;</div>
</div>

<script type="text/javascript">
require(['jquery'], function($) {
    $(document).ready(function() {
        var $btn = $('#back-to-top');
        $(window).scroll(function() {
            if ($(this).scrollTop() > 300) {
                $btn.fadeIn();
            } else {
                $btn.fadeOut();
            }
        });
        $btn.click(function() {
            $('html, body').animate({scrollTop: 0}, 600);
            return false;
        });
    });
});
</script>

Then Save HTML Code and Save Blocks when done.

2. Display the Block Using a Widget

Now, we’ll use Magento’s Widget system to render the block on all pages.

Go to Content > Widgets > Add Widget

• Type: CMS Static Block
• Design Theme: Select your current frontend theme
• Click Continue.

Widget Settings

• Widget Title: Back to Top Widget
• Assign to Store Views: Choose appropriate views
• Layout Updates:
  • Display On: All Pages
  • Container: After Body Start (or Footer if you prefer)

In the Widget Options, select the Back to Top Button block you just created.

Click Save and Flush Magento Cache under System > Cache Management.

Results

• The “Back to Top” button appears when users scroll down more than 300 pixels.
• It is fully centered, square with rounded corners, and animated.
• No need to touch .phtml files, deploy static content, or edit Magento’s core theme files.
• You can easily edit its style, color, or behavior from the admin panel later.

Adding a “Back to Top” button in Magento 2 doesn’t have to be complicated or require code changes on the server. By leveraging Magento’s CMS blocks and widgets, you can implement a functional and beautifully styled button using only admin panel tools.

Would you like to add an SVG arrow or animation effect? Drop your ideas in the comments and let’s enhance it together!

Follow us for the more helpful posts!

We hope this is a useful post for you.

You can read more useful posts like What’s New in Magento 2.4.8: Key Features and Updates.