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

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

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

  • Создать 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, а стили и скрипты лучше вынести в отдельные файлы.

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

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

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

Устанавливаем видео с youtube/vimeo на задний фон

Октябрь 14, 2017 г.

Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов. Плагины позволяют подставить в бекграунд ...

Читать

Прокрутить HTML документ к заданной позиции

Июль 6, 2018 г.

Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам HTML контейнера. Чтобы сделать переход плавно, можно использовать функцию jQuery().animate(). Суть процесса такова - вычисляем вертикальную позицию требуемого ...

Читать

 

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

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



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