Кнопка наверх для сайта
Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью 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"
});
});
});
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: