![\"Scroll](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/1-scroll-to-top-preview-on-frontend.png\")
<\/figure>\n<\/div>\n\n\nYour 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. <\/p>\n\n\n\n
Options to Add Back to Top Button in Magento 2<\/h2>\n\n\n\n
You have two options to add back to top button in Magento 2: <\/p>\n\n\n\n
- \n
- Using a Third-party Extension –<\/strong> 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.\u00a0<\/li>\n\n\n\n
- Using a Widget in Admin – <\/strong>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.\u00a0<\/li>\n<\/ul>\n\n\n\n
Follow these steps to manually add scroll to the top Magento 2. <\/p>\n\n\n\n
Steps to Add Back to Top Button in Magento 2 Using a Widget<\/h2>\n\n\n\n
Step 1: Add a New Block<\/h3>\n\n\n\n
In your Magento 2 admin, go to Content > Blocks <\/strong>and add a new block. Now, enter the following details for the block:<\/p>\n\n\n\n
- \n
- Enabled –<\/strong> Yes<\/li>\n\n\n\n
- Block Title – <\/strong>Meetanshi Back to Top<\/li>\n\n\n\n
- Identifier – <\/strong>back-to-top<\/li>\n<\/ul>\n\n\n\n
Step 2: Add the HTML Code <\/h3>\n\n\n\n
Select the applicable store view for the back-to-top functionality. <\/p>\n\n\n
\n![\"Add](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/2-Add-the-HTML-Code.png\")
<\/figure>\n<\/div>\n\n\nAnd insert the following HTML code in the block content:<\/p>\n\n\n\n
<!-- Meetanshi Scroll to Top Button Starts-->\n<div id=\"scroll-to-top\" style=\"display:none; position:fixed; bottom:20px; right:20px; z-index:1000;\">\n <a href=\"#top\" onclick=\"scrollToTop(event)\">\n <img alt=\"Meetanshi scroll-to-top button\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/01\/meetanshi-scroll-to-top-icon.png\" alt=\"Scroll to top\" style=\"width:50px; height:50px; display:block;\">\n <\/a>\n<\/div>\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const scrollToTopButton = document.getElementById(\"scroll-to-top\");\n\n window.addEventListener(\"scroll\", function () {\n if (window.scrollY > 300) {\n scrollToTopButton.style.display = \"block\";\n } else {\n scrollToTopButton.style.display = \"none\";\n }\n });\n\n \/\/ Smooth scroll to top function\n window.scrollToTop = function (event) {\n event.preventDefault();\n window.scrollTo({\n top: 0,\n behavior: \"smooth\"\n });\n };\n });\n<\/script>\n<!-- Meetanshi Scroll to Top Button Ends-->\n<\/pre>\n\n\n\nThen, Save<\/strong> the block.<\/p>\n\n\n\n
Now, go to Content > Widgets <\/strong>and add a new widget. Choose the widget type as CMS Static Block <\/strong>and select your store\u2019s active theme. Enter a title for the widget, i.e. Back to Top.<\/p>\n\n\n\n
Choose the store view for the back to top button.<\/p>\n\n\n
\n![\"Now](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/3-Now-Add-New-Widget-as-CMS-Static-Block.png\")
<\/figure>\n<\/div>\n\n\nScroll down to Layout Updates<\/strong>, where you can set the pages where you want to display the scroll to top button (e.g., all pages) and choose Page Bottom<\/strong> for the container.<\/p>\n\n\n
\n![\"Scroll](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/4-Scroll-Down-to-Layout-Updates.png\")
<\/figure>\n<\/div>\n\n\nClick Save and Continue Edit<\/strong>.<\/p>\n\n\n\n
Step 3: Select the CMS Block <\/h3>\n\n\n\n
Finally, choose the CMS block that we created in earlier steps for the back to top button and Save<\/strong> the widget.<\/p>\n\n\n
\n![\"Select](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/5-Select-the-CMS-Block-Created-Earlier-and-Save-the-Widget.png\")
<\/figure>\n<\/div>\n\n\nThis will display a back to top button on pages whenever users scroll down the page.<\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\nIsn’t it that simple? Try out this solution without spending on any pricey extension.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":5,"featured_media":6815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-6801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/6801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=6801"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/6801\/revisions"}],"predecessor-version":[{"id":6817,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/6801\/revisions\/6817"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/6815"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=6801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=6801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=6801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Block Title – <\/strong>Meetanshi Back to Top<\/li>\n\n\n\n
- Using a Widget in Admin – <\/strong>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.\u00a0<\/li>\n<\/ul>\n\n\n\n