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