Делаем кнопку Вверх для CMS OpenCart 4.1. (1 вариант)

Всем привет, на многих сайтах есть полезная кнопка для прокрутки страниц вверх, давайте сегодня мы с вами сделаем такую же кнопку на стандартный шаблон CMS OpenCart 4.1. В этой статье мы будем использовать иконочный шрифт Font Awesome.

1. Откроем файл: ../public_html/catalog/view/template/common/footer.twig и перед этой строкой:

</body></html>

вставим эти:

<script type="text/javascript">
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() != 0) {
                $('#topbutton').fadeIn();
            } else {
                $('#topbutton').fadeOut();
            }
        });
        $('#topbutton').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 700);
        });
    });
</script>
<i class="fa-solid fa-circle-arrow-up" id="topbutton"></i>

Если вам не нравится выбранная мной для примера иконка вы всегда можете изменить её на свою: https://fontawesome.com/

просто замените эту строку:

<i class="fa-solid fa-circle-arrow-up" id="topbutton"></i>

например на эту:

<i class="fa-solid fa-circle-chevron-up" id="topbutton"></i>

как видим мы сменили класс иконки, но оставили её id (по которому и работает наш скрипт прокрутки вверх).

2. Откроем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла добавляем эти строки:

#topbutton {
    position: fixed;
    right: 20px;
    bottom: 20px;
    font-size: 40px;
    color: #607D8B;
}
#topbutton:hover {
    color: #ddd;
}

Я сделал иконку справа, но никто не мешает вам её переместить влево и изменить её цвет, к примеру вот так:

#topbutton {
    position: fixed;
    right: 20px;
    bottom: 20px;
    font-size: 40px;
    color: #2196F3;
}
#topbutton:hover {
    color: #9E9E9E;
}

Чистим все кеши и смотрим результат:

Как видите всё очень легко и просто.

Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).

На этом всё, до встречи в новой статье.