Если вы хотите сделать ваш сайт чуть более удобней для посетителей, то пора бы задуматься о кнопке scroll to top, или, как ее еще называют “вернуться наверх страницы”. Но, мы ведь хотим не просто олдскульную кнопку с href=”#” 🙂
Как сделать кнопку scroll to top на jQuery
Для начала, определимся, что мы хотим сделать: наша кнопка должна появляться на странице, когда мы доскролим до определенной высоты, а сама анимация должна быть плавной. Пропишите путь к вашей библиотеке jQuery, гугл CDN или физическое расположение на вашем сервере.
В данном примере мы не будем рассматривать подробно CSS кнопки, я уверен вы и так знаете, что блок с фразой “вернуться наверх” или иконкой (что на мой взгляд куда симпатичнее смотрится), должен обязательно иметь position fixed или position absolute.
Рассмотрим сам код нашего файла script.js (который тоже нужно подключить, но только после подключения jQuery):
$(function(){
//scroll to top
$('.button-up').click(function(){
$('html, body').animate({ scrollTop: 0 }, 500);
return false;
});
});
button-up – класс нашей кнопки, например, можно создать в конце вашего документа div с таким классом. По клику происходит анимация к самому верху страницы, за пол секунды, т.к. в javascript все время указывается в миллисекундах. Для увеличения анимации можно поменять 500 на 1000, но мы даже тут будем экономить 🙂
return false мы пишем только для того, чтобы отменить событие по умолчанию – клик по ссылке с атрибутом href=”#” не будет переходить по ней (в данном случае переход к id на странице).
Как отобразить кнопку на jQuery при прокрутке страницы
Для решения этой задачи сделаем так, чтобы наша кнопка scroll-to-top была скрыта по умолчанию при загрузке страницы. Ваш HTML код должен быть приблизительно следующим (в этот раз рассмотрим именно пример с тегом a, чтобы убедиться в работе return false):
<a href="#" class="button-up hidden"></a>
Пишем в CSS:
.hidden {display:none}
При загрузке нашей страницы мы не видим эту кнопку. Добавим событие при скролле:
$(function(){
//scroll to top
$('.button-up').click(function(){
$('html, body').animate({ scrollTop: 0 }, 500);
return false;
});
//show up-button
$(document).scroll(function(){
var y = $(this).scrollTop();
if (y > 800) {
$('.button-up').removeClass('hidden');
} else {
$('.button-up').addClass('hidden');
}
});
});
Добавляем функцию при скролле документа и проверяем какая у нас текущая высота, если она больше 800 пикселей, то убираем класс hidden. Со стилями я думаю вы и сами разберетесь. Можно также добавить анимацию плавного появления этой кнопки при помощи CSS3 или немного изменив нашу функцию:
//show up-button
$(document).scroll(function(){
var y = $(this).scrollTop();
if (y > 800) {
$('.button-up').fadeIn();
} else {
$('.button-up').fadeOut();
}
});
В данном случае нам и класс не понадобился, а какой способ предпочитаете вы? 🙂
