Как добавить на сайт кнопку «наверх»
Кнопка «наверх» может быть реализована на чистом CSS, а также с использованием JS или JQuery. Мы остановимся на варианте, когда основной функционал будет работать на CSS, а с помощью скрипта обеспечиваться невидимость кнопки, пока пользователь находится в начале документа.
HTML
Добавим к body идентификатор «top». Сюда должен попасть пользователь, когда нажмет на ссылку-якорь.
<body id="top">
Создадим HTML-разметку ссылки-якоря (далее — кнопки).
<a id="btn-top" href="#top">▲</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");
}
});
Если вы дочитали до этих строк, посмотрите в правый нижний угол экрана. Там вы увидите кнопку, которую мы только что разобрали.