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

Безкоштовне рішення - Magento 2 Scroll To Top

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

 

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

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. Це все :-)