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

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

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

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

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

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

Украшательства на сайте : делаем надпись поверх картинки

Март 13, 2013 г.

Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки ...

Читать

Как определить загружен ли определенный плагин для jQuery

Сентябрь 7, 2018 г.

Возможно ли проверить загружен или нет определенный jQuery плагин? Нет ничего проще! Самый краткий вариант проверки того, определен ли в текущий ...

Читать

Проверка checkbox состояния checked, jQuery

Февраль 19, 2020 г.

Шаблон для проверки состояния элемента input[type='checkbox']. Код проверяет отмечен элемент или нет. [crayon-68959dff1e95f313704473/] Проверка выполняется с помощью метода is(), который читает в данном случае не атрибуты тега input, а именно ...

Читать

Делаем эффект параллакса для заднего фона на сайте

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

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать
 

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

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



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