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

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

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

</body></html>

вставим эти:

<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });
        $('.scrollup').click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            return false;
        });
    });
</script>
<a href="#" class="scrollup">Наверх</a>

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

.scrollup {
    width: 40px;
    height: 40px;
    opacity: 0.6;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: none;
    text-indent: -9999px;
    background: url('/image/catalog/icon_top.png') no-repeat;
}
.scrollup:hover {
    opacity: 0.9;
}

3. Откроем папку ../public_html/image/catalog/ и добавим в неё наше изображение с названием icon_top и расширением png. В моём случае это:

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

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

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

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