Кнопка «Вверх» с анимацией прокрутки окна

Ставший уже привычным элемент навигации внутри страницы — кнопка «Вернуться к началу страницы». Разберем как реализовать эту функцию.

План следующий:

  • Создать HTML код кнопки;
  • (БОНУС) Прятать кнопку, если мы и так уже в самом верху страницы.
  • Подключить к ней обработчик события нажатия (on click);
  • Реализовать плавную анимацию скролла к началу страницы;

Что нам еще понадобится с технической точки зрения? Я буду пользоваться библиотекой jQuery, для сокращения js кода.

HTML код кнопки «Вверх»

Кнопка в нашем случае — это любой HTML контейнер, но для удобства последующей кастомизации, я использую подход wrapper + container, что на практике означает, что я создаю сразу два контейнера. Один из которых (wrapper) используется для позиционирования кнопки, а второй — для самой кнопки (container).

Получается следующий код и некоторые стили:

Роль контейнера будет выполнять тег <A>. А позиционирующий элемент div.uptotop в нашем примере фиксирует положение кнопки внизу-справа на экране.

Прячем кнопку, пока мы вверху страницы

Для реализации «бонуса» мы будем добавлять/убирать у кнопки определенный html класс, назовем его .show.

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

В скрипте условие st > 300 означает, что мы опустились ниже 300 точек от начала документа. Мы можете соответственно изменить эту константу, для ваших нужд.

Подключаем обработчик на кнопку

Код не сложен, посмотрим и разберем его:

Для начала мы блокируем обработчики по умолчанию, а затем выполняем перемотку к вертикальной позиции со значением 0, т.е. на самый верх страницы.

Но перемотка происходит мгновенно, что совсем не из области юзер-френдли.

Плавная анимация скролла вверх

Тут нам сильно поможет jQuery, который предоставляет мощную хелпер-функцию animate().

С её помощью мы меняем параметр scrollTop не сразу, а в течении какого то времени. В примере я задал 500 мс.

Всё вместе

Здесь соберем весь код из рассмотренных выше кусочков. Я не стал добавлять сюда обязательные для <html> документа теги, чтобы не засорять код.

Нужно подключить также jQuery, а стили и скрипты лучше вынести в отдельные файлы.

В данной тематике, возможно, вас заинтересует еще один пример — перемотка страницы к позиции определенного контейнера.

Написать комментарий

Мало букафф? Читайте есчо !

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Связанные списки select с получением данных по ajax

Декабрь 15, 2016 г.

В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве. Подготовить ...

Читать

 

Комментарии к «Кнопка «Вверх» с анимацией прокрутки окна»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: