Скрипт для добавления кнопки "Наверх"

2023-03-24 23:13 Тильда

Для добавления кнопки "Наверх" на ваш сайт на Тильде, вы можете использовать следующий скрипт:

Создайте новый HTML-блок на странице Тильды, где вы хотите разместить кнопку "Наверх".
Добавьте следующий код в HTML-блок:

<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

Добавьте следующий CSS-код в раздел "Настройки дизайна" > "Дополнительно" > "CSS-код":

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    color: #fff;
    font-size: 32px;
    z-index: 9999;
    opacity: 0.7;
}

.back-to-top:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .back-to-top {
        font-size: 24px;
        bottom: 10px;
        right: 10px;
    }
}

Добавьте следующий скрипт в раздел "Настройки дизайна" > "Дополнительно" > "JavaScript-код":

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.back-to-top').fadeIn();
        } else {
            $('.back-to-top').fadeOut();
        }
    });

    $('.back-to-top').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

После выполнения этих шагов, кнопка "Наверх" будет отображаться на вашей странице Тильды, и при клике на нее пользователи будут возвращаться к верхней части страницы.

Алексей Османов