Кнопка вверх для сайта

Удобство пользователя на сайте — это очень важная составляющая успеха сайта. И такая, казалось бы мелочь, как кнопка «Вверх» способна в некоторых случаях создать пользователю дополнительный комфорт при перемещениях на страницах ресурса. Ведь очень распространены ситуации, когда навигация располагается в самой верхней части страницы, а сама страница изобилует контентом. Долго скроллить страницу вверх для перемещения в другие разделы становится утомительно. В такой ситуации как нельзя кстати окажется наличие специальной кнопки, которая позволит быстро переместиться в начало.

Создать кнопку «вверх» на сайте можно очень простыми способами и даже обойтись без скриптов. Например, простая ссылка с href=» # » переместит пользователя в начало страницы. Но при этом в адресной строке браузера добавится символ #, а сам процесс перехода произойдет мгновенно, что не очень красиво. Поэтому лучше написать крохотный скрипт с использованием jQuery, который сделает процесс визуально приятным. К тому же показывать кнопку, когда пользователь находится в начале страницы не имеет смысла.

В начале определим разметку:

И стиль для кнопки, а так же зададим минимальную высоту для body, чтобы получить полосу прокрутки в браузере:

Кнопка представляет собой фиксировано позиционированную ссылку с фоновым изображением, которая изначально скрыта.

Скрипт для обработки поведения кнопки реализуем в виде объекта с 3 методами:

В метод init добавляет обработчики событий для скролла и клика по кнопке, а так же скрывает кнопку, если изначально она не была скрыта.

Метод scrollHandler — это функция-обработчик скролла, который вызывается каждый раз при скролле страницы и если положение скролла больше некоторого установленного значения (в данном случае 0), то показываем кнопку «Вверх» и скрываем её в противном случае. Значение distance задаётся как свойство объекта.

При клике на кнопку — анимировано поднимаем страницу вверх со скоростью, которая определяется в свойстве speed.

Обратите внимание, что animate назначается для html и для body. Это нужно, чтобы скрипт корректно работал в разных браузерах.

Посмотреть рабочий пример можно тут.

Скачать пример.

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *