Frontend

Как добавить на сайт кнопку «наверх»

10.05.2024

Кнопка «наверх» может быть реализована на чистом CSS, а также с использованием JS или JQuery. Мы остановимся на варианте, когда основной функционал будет работать на CSS, а с помощью скрипта обеспечиваться невидимость кнопки, пока пользователь находится в начале документа.

HTML

Добавим к body идентификатор «top». Сюда должен попасть пользователь, когда нажмет на ссылку-якорь.

<body id="top">

Создадим HTML-разметку ссылки-якоря (далее — кнопки).

<a id="btn-top" href="#top">&#9650;</a>

Разместить ее можно перед закрывающим тегом </body>.

CSS

Чтобы сделать прокрутку документа плавной, используем свойство scroll-behavior со значением smooth.

Свойство scroll-behavior сделает плавной прокрутку до идентификатора. На прокрутку колесиком мыши оно не повлияет.

В итоге получим:

body {
    scroll-behavior: smooth;
}

Стилизуем кнопку и сделаем ее невидимой по умолчанию (visibility: hidden;opacity: 0;).

#btn-top {
    position: fixed; 
    right: 35px;
    bottom: 35px;
    width: 40px;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #222;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
}

После начала скроллинга кнопка должна стать видимой. Для этого пропишем класс .active, применение которого переопределит значения visibility и opacity.

#btn-top.active {
    visibility: visible;
    opacity: 1;
}

Наконец, добавим эффект смены цвета заливки кнопки при наведении на нее курсором мыши.

Правило @media необходимо для адекватной работы :hover на мобильных устройствах.

@media (hover: hover) {
    #btn-top:hover {
        background-color: #aaa;
    }
}

С разметкой и стилями все. Добавим небольшой скрипт на JS или JQuery. Данный скрипт обеспечит появление или скрытие кнопки при скроллинге.

Вариант на JQuery

Основной смысл происходящего сводится к следующему. Скрипт отслеживает события прокрутки экрана, и когда мы выполняем прокрутку более чем на 50px от начала документа, добавляет класс .active к кнопке (если класс еще не был добавлен). Появление кнопки с использованием плавной анимации происходит уже средствами CSS (для этого мы прописали свойство transition, чтобы задать продолжительность анимации для каждой трансформации, в том числе и для opacity). Когда мы возвращаемся в начало документа, скрипт удаляет класс у кнопки (если класс еще не удален), в результате чего происходит анимация ее исчезновения (опять же, средствами CSS).

let btnTop = $("#btn-top");
$(window).on("scroll", function() {
    if (btnTop.not(".active") && $(document).scrollTop() > 50) {
        btnTop.addClass("active");
    } else if (btnTop.has(".active") && $(document).scrollTop() < 50) {
        btnTop.removeClass("active");
    }
});

Вариант на JS

Здесь работа скрипта полностью аналогична варианту на JQuery. Просто приведу код.

let btnTop = document.querySelector("#btn-top");
window.addEventListener("scroll", function() {
    if (!btnTop.classList.contains("active") && window.scrollY > 50) {
        btnTop.classList.add("active");
    } else if (btnTop.classList.contains("active") && window.scrollY < 50) {
        btnTop.classList.remove("active");
    }
});

Если вы дочитали до этих строк, посмотрите в правый нижний угол экрана. Там вы увидите кнопку, которую мы только что разобрали.

#css #html #jquery #js #веб-разработка

Плохой хороший код