Кнопка "Наверх"

25 Сентября 2019 12:39

Кнопка "Наверх" обеспечит нам возможность плавного перемещения (delay) к шапке сайта. По умолчанию кнопка не видна, но при прохождении указанного количества пикселей (showButton), отображается.

Вставляем кусок разметки где угодно, хоть сразу после body.

<div id="buttonToTop">Наверх</div>

Вставляем скрипт как удобно - в хидере, в файле и т.д.

<script type="text/javascript">
const showButton = 150;
const delay = 500;

$(document).ready(function(){
    $(window).scroll(function () {
        if($(this).scrollTop() > showButton) {
            $('#buttonToTop').fadeIn();
        }else{
            $('#buttonToTop').fadeOut();
        }
    });

    $('#buttonToTop').click(function () {
        $('body, html').animate({
            scrollTop: 0
        }, delay);
    });

});
</script>

Базовый стиль для примера. Можно под себя подогнать, главное, оставить display: none;

<style>
#buttonToTop {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 50px;
    cursor: pointer;
    font-size: 150%;
}
</style>