Кнопка наверх для сайта

Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью jQuery и нативного JavaScript. Когда посетитель будет скроллить страницу вниз, в определенном месте будет появляться кнопка, при клике на которую, произойдёт плавный скролл наверх страницы.

В HTML файле создайте div, который будет представлять из себя кнопку для возврата наверх.

<div class="to-up">Наверх</div>

Данная кнопка оформлена может быть как угодно, не просто надпись «Наверх», например, вы можете кнопку сделать в виде картинки.

В CSS файле спозиционируем кнопку (например, справа снизу) и скроем её. В дальнейшем с помощью javascript сделаем чтобы она появлялась.

.to-up {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: none;
    z-index: 22;
    cursor: pointer;
}

Так же добавили z-index - определяет порядок слоёв по оси Z и cursor: pointer - чтобы появлялась рука при наведении (т.к. у нас вместо ссылки div). Другие стили по желанию и воображению.

jQuery: на расстоянии 780px показываем блок с помощью функции fadeIn, а на расстоянии меньше 997px скрываем при помощи fadeOut. Так же задаём скорость перехода Наверх в миллисекундах (например, 566).

jQuery(($) => {
    $(window).scroll(function(){
        if ($(this).scrollTop() > 780) $('.to-up').fadeIn();
        else $('.to-up').fadeOut();
    });
    $('.to-up').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 566);
        return false;
    });
});

Кнопка наверх на чистом JavaScript

Теперь реализуем «Кнопку наверх» на ванильном JavaScript.

document.addEventListener('DOMContentLoaded', () => {

    let toTopBtn = document.querySelector('.to-up');

    window.onscroll = function () {
        if (window.pageYOffset > 580) {
            toTopBtn.style.display = 'block'
        } else {
            toTopBtn.style.display = 'none'
        }
    }

    // плавный скролл наверх

    toTopBtn.addEventListener('click', function () {
        window.scrollBy({
            top: -document.documentElement.scrollHeight,
            behavior: 'smooth'
        });
    });
});