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

Учитывая популярность мобильных устройств и адаптивной верстки, сайты стали растягиваться в длину на несколько экранов, соответственно, когда текст длинный, то прокрутить страницу вверх уже тяжело. Для удобства пользователей добавляют кнопку «Вверх». Однако простая реализация кнопки с помощью якоря, прокручивает страницу рывком. Использование JS или jQuery помогает решить эту проблему сделав кнопку плавной прокрутки.

Предложенные решения на множестве сайтов обладают рядом недостатков. Наиболее часто встречаются решения в которых кнопка видима постоянно, даже если нет полос вертикальной прокрутки. Второй недостаток – необходимость добавлять в html код страницы сторонние элементы, которые формируют кнопку вверх вручную. Третий недостаток – ограничение на использование элементов. В одних случаях это только гиперссылка, в других только изображение.

Просмотрев кучу скриптов, выбрал наиболее оптимальный и дописал необходимый функционал. Итак, написанный скрипт формирует кнопку вверх, когда пользователь прокручивает страницу вниз более чем на один экран. Появление кнопки – плавное. Сама кнопка – это гиперссылка, в которую вы можете добавить любой элемент: и блоки, и изображения.

Добавлять в HTML код ничего не нужно. Кнопка добавляется автоматически. Итак, как добавить кнопку Вверх на сайт? Вначале подключите в head библиотеку jQuery.

Затем подключите ниже библиотеку с кодом кнопки.

Для оформления кнопки добавьте в CSS два класса, которые описывают обычное состояние ссылки и ее hover состояние.

Как обычно, посмотреть решение можно на CodePen

See the Pen ZWWrdP by Alex (@Asmodey) on CodePen.

или скачать готовое с GitHub.

Кнопка «Вверх» с плавной автопрокруткой: 2 комментария

  1. abookz.net

    Вот таким образом реализуется плавная прокрутка скролла на jQuery , а также плавный вывод кнопки » Наверх » при соответствующем положении скролла.

  2. Дмитрий

    Кстати, для тех, кто только изучает JS (для меня), использование jQuery, делает код непонятным((

Добавить комментарий для Дмитрий Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *