Кнопка наверх для сайта на jQuery
На страницах сильно загроможденных контентом, для удобства пользователей, кнопка «Наверх» просто необходима .
Для функционирования данной кнопки понадобится библиотека jQuery. Убедитесь что она подключена на вашем сайте. Далее чтобы сделать кнопку наверх необходимо выполнить три простых шага.
1. Создание разметки кнопки:
|
1 |
<div id="page__up"> наверх </div> |
2. Оформление:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#page__up { width: 100px; background: #b9b1b4; text-align: center; padding: 8px; position: fixed; bottom: 10%; right: 10px; cursor: pointer; display: none; color: #fff; font-size: 19px; } #page__up:before{ content: '\2191'; display: block; position: absolute; top: 5px; } |
Оформление может быть любое, тут главное фиксированное позиционирование и то что кнопка скрыта по умолчанию.
3. Скрипт кнопки наверх:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $('#page__up').fadeIn(); } else { $('#page__up').fadeOut(); } }); $('#page__up').click(function() { $('body,html').animate({scrollTop:0},800); }); }); |
Здесь с помощью свойства scrollTop измеряется дистанция от верха окна браузера и если она больше нуля, то кнопка «наверх» становится видимой.