В этой статье я хочу уделить внимание такому вопросу: как сделать кнопку прокрутки «Наверх»? После прочтения вы получите готовый скрипт, который без труда установите себе на сайт.
Наверняка, на многих сайтах вы видели данный функционал. Когда страницы длинные, и пользователю приходится долгое время скролить обратно в начало, то присутствие кнопки прокрутки «Наверх» явный признак заботы о нём. Стоит сказать, что до сих пор встречаются сайты, которые не используют данное решение, хотя поставить себе скрипт занимает пару минут.
И так, давайте приступим, начнём с подключения jQuery библиотеки:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Теперь нам необходимо задать правила стилей для кнопки, чтобы поместить её в правый нижний угол и скрыть. Правила, к слову, могут быть любыми, в зависимости от дизайна сайта, но не стоит забывать, что кнопка изначально не должна отображаться.
#totop{
display: none;
background: url(totop.png) no-repeat center center;
height: 52px;
width: 52px;
overflow: hidden;
position: fixed;
right: 10px;
bottom: 10px;
opacity: 0.7;
}
#totop:hover{
opacity: 1;
}
Пишем jQuery функцию, которая будет принимать два параметра: элемент и скорость прокрутки.
function scrollToTop(element, speed){
$(window).scroll(function(){
if($(this).scrollTop() > 300){
element.fadeIn(600);
}else{
element.fadeOut(600);
};
});
element.click(function(){
var elementClick = $(this).attr("href"),
destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)")
.animate({
scrollTop: destination
}, speed);
return false;
});
return false;
};
После загрузки страницы вызываем её:
$(function(){
scrollToTop($("#totop"), 1000);
});
Как видите весь код, я поместил в функцию, это сделано, чтобы избежать случаев, когда работая с ajax необходимо вызывать заново скрипт.
Сам же написанный код делиться на две части:
- Отображение и скрывание кнопки при прокрутке страницы;
- Обработка клика по кнопке (обрабатывая событие клика, стоит возвращать false, чтобы путь #id не прописывался в адресной строчке).
Вот и всё, кнопка «Наверx» для сайта готова. Вам останется только скачать скрипт и подключить.