How to Add Back to Top Button in Magento 2? – Easiest Way

Shoppers love simple navigation, and scroll to top button is one of them.

What is Scroll to Top Button?

Scroll to top button is a simple navigation button that takes the shopper to the top of the page without any manual scrolling. 

Like this: 

Your shopper simply clicks the button and is navigated directly to the top. In this blog, I will show you the easiest way to add back to the top button in Magento 2 among the different options you have. 

Options to Add Back to Top Button in Magento 2

You have two options to add back to top button in Magento 2: 

• Using a Third-party Extension – Here, with the help of a third-party extension, you can implement this feature, but it is an expensive solution for adding a simple functionality to your store. 
• Using a Widget in Admin – Display you a Magento 2 scroll to top button with a simple code that won’t even cost you a penny and easily shows the functionality. 

Follow these steps to manually add scroll to the top Magento 2. 

Steps to Add Back to Top Button in Magento 2 Using a Widget

Step 1: Add a New Block

In your Magento 2 admin, go to Content > Blocks and add a new block. Now, enter the following details for the block:

• Enabled – Yes
• Block Title – Meetanshi Back to Top
• Identifier – back-to-top

Step 2: Add the HTML Code 

Select the applicable store view for the back-to-top functionality. 

And insert the following HTML code in the block content:

<!-- Meetanshi Scroll to Top Button Starts-->
<div id="scroll-to-top" style="display:none; position:fixed; bottom:20px; right:20px; z-index:1000;">
  <a href="#top" onclick="scrollToTop(event)">
    <img alt="Meetanshi scroll-to-top button" src="https://blog.meetanshi.com/wp-content/uploads/2025/01/meetanshi-scroll-to-top-icon.png" alt="Scroll to top" style="width:50px; height:50px; display:block;">
  </a>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const scrollToTopButton = document.getElementById("scroll-to-top");

    window.addEventListener("scroll", function () {
      if (window.scrollY > 300) {
        scrollToTopButton.style.display = "block";
      } else {
        scrollToTopButton.style.display = "none";
      }
    });

    // Smooth scroll to top function
    window.scrollToTop = function (event) {
      event.preventDefault();
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    };
  });
</script>
<!-- Meetanshi Scroll to Top Button Ends-->

Then, Save the block.

Now, go to Content > Widgets and add a new widget. Choose the widget type as CMS Static Block and select your store’s active theme. Enter a title for the widget, i.e. Back to Top.

Choose the store view for the back to top button.

Scroll down to Layout Updates, where you can set the pages where you want to display the scroll to top button (e.g., all pages) and choose Page Bottom for the container.

Click Save and Continue Edit.

Step 3: Select the CMS Block 

Finally, choose the CMS block that we created in earlier steps for the back to top button and Save the widget.

This will display a back to top button on pages whenever users scroll down the page.

Isn’t it that simple? Try out this solution without spending on any pricey extension.