When a visitor scrolls the web-page down It is convenient to display a button that will allow easily, by a one-click move customer back to the top of the page. 

Scroll to Top Free Solution in Magento 2

(button example)

To enable such a button on your website please follow these simple steps:

1. Create default.xml layout file in your theme directory:


2. Paste the XML code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="before.body.end">
<block name="magefan.go.to.top" template="Magento_Theme::gototop.phtml" />

3. Create gototop.phtml template file:


4. Paste the code:

<style type="text/css">
    #mfbacktop {
    background: #324367;
    border: 2px solid white;
border-radius: 100%;
    -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
     box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
     color: #ffffff;
     cursor: pointer;
     font-size: 13px;
     font-weight: 600;
     height: 60px;
    line-height: 18px;
     padding: 2px;
     position: fixed;
     right: 20px;
     bottom: 20px;
     text-align: center;
     text-transform: uppercase;
     width: 60px;
     z-index: 9999;
     display: none;
text-decoration: none;
#mfbacktop span {display: block}
#mfbacktop .gt-arrow {padding-top: 8px}

<a rel="nofollow" onclick="javascript:void(0);" id="mfbacktop"><span class="gt-arrow">^</span><span class="gt-text"><?= __('Top') ?></span></a>

<script type="text/javascript">
require(['jquery', 'domReady!'], function($){
var $bt = $('#mfbacktop');
function ManageGoToTop() {
         if($(this).scrollTop() > 300) {
        } else {
     $bt.on('click touch',function() {
return false;

4. Save default.xml  and gototop.phtml files and flush Magento cache.

5. If your Magento is in production mode, run static content deploy CLI command:

php bin/magento setup:static-content:deploy

6.That's it :-)