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

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

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

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

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

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

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

jQuery плагин для ввода диапазона значений

Февраль 22, 2017 г.

Подбирал плагин, реализующий компонент для выбора диапазона чисел. Перебрал не мало "добра", были и некоторые довольно свежие плагины, но остановил свой ...

Читать

Показ навигации и пагинатора swiper js за пределами контейнера

Апрель 11, 2018 г.

swiper js - jQuery плагин для создания адаптивной карусели  картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера. SWIPER на GITHUB. Это стандартный шаблон, который ...

Читать

 

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

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



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