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

Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью 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 to_top_btn = document.querySelector(".to-up");

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

    // плавный скролл наверх
    to_top_btn.addEventListener("click", function () {
        window.scrollBy({
            top: -document.documentElement.scrollHeight,
            behavior: "smooth"
        });
    });
});