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

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

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

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

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

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

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

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

Jquery перебор элементов

Октябрь 18, 2015 г.

С помощью селектора jQuery мы выбрали какие то элементы. Как теперь организовать их перебор в цикле? Есть пара вариантов. Используем функцию $.each(func) Разработчики не могли не заложить перебор по найденным элементам в библиотеку. Параметром должна ...

Читать

 

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

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



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