Коли відвідувач прокручує веб-сторінку вниз, зручно було б відображати кнопку, яка дозволяє легко, одним кліком перемістити користувача назад вверх сторінки.

(приклад кнопки)

 

Щоб увімкнути таку кнопку на своєму веб-сайті, виконайте такі прості кроки:

1. Створіть файл макету default.xml у каталозі своєї теми:

/app/design/frontend/ThemeVendor/ThemeName/Magento_Theme/layout/default.xml

2. Вставте цей XML код:

<?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">
<body>
<referenceContainer name="before.body.end">
<block name="magefan.go.to.top" template="Magento_Theme::gototop.phtml" />
</referenceContainer>
</body>
</page>

3. Створіть файл шаблону gototop.phtml:

/app/design/frontend/ThemeVendor/ThemeName/Magento_Theme/templates/gototop.phtml

4. Вставте наступний код:

<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}
</style>

<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) {
             $bt.fadeIn();
        } else {
            $bt.fadeOut();
         }
     }
     ManageGoToTop();
     $(window).scroll(ManageGoToTop);
     $bt.on('click touch',function() {
         $('body,html').animate({scrollTop:0},500);
return false;
     })
});
</script>

4. Збережіть файли default.xml та gototop.phtml та очистіть кеш.

5. Якщо ваш Magento перебуває у production режимі, запустіть CLI команду для розгортання статичного контенту (static content deploy):

php bin/magento setup:static-content:deploy

6. Це все :-)