В этот раз мы рассмотри довольно популярную фичу для сайта. Кнопка "Вверх" придает сайту динамичность и в некоторые моменты очень удобна и полезна для вашего посетителя. Идея следующая: при скроллинге страницы на определенном уровне появляется симпатичная кнопочка с изображением стрелочки наверх. При клике на нее страница плавно скроллится наверх. Особенно важна такая кнопка для страниц с длинным контентом.
Для реализации такого функционала достаточно нескольких строк javascript\jQuery, нет необходимости искать готовые скрипты, библиотеки, плагины. Верстаем кнопочку, располагаем на экране с помощью фиксированного позиционирования и прячем ее. Следом добавляем следующий код:
Код, отвечающий за отображение кнопки:
$(window).scroll(function(){ //определяем событие скроллинга
var windowpos = $(window).scrollTop(); //определяем уровень прокрученной страницы
if(windowpos < 5) { //если не ниже 5 пикселей от топа - скрываем кнопку
$('.top').fadeOut(500);
} else { //иначе показываем
$('.top').fadeIn(500);
}
});
var windowpos = $(window).scrollTop(); //соответственно при открытии страницы нам также
if(windowpos < 5) { //необходимо определить уровень страницы
$('.top').fadeOut(500);
} else {
$('.top').fadeIn(500);
}
Клик по кнопке и непосредственно скроллинг к топу:
$.fn.scrollToTop=function(){
$(this).click(function(){ //определяем клик по кнопке
$("html, body").animate({scrollTop:0},"normal"); //скроллим средней скоростью страницу к верху
})
}
$(".top").scrollToTop(); //подвязываем функцию к кнопке вверх
Демо-пример приводить не буду, на сайте на левой панели расположена кнопка "Вверх".