Учитывая популярность мобильных устройств и адаптивной верстки, сайты стали растягиваться в длину на несколько экранов, соответственно, когда текст длинный, то прокрутить страницу вверх уже тяжело. Для удобства пользователей добавляют кнопку «Вверх». Однако простая реализация кнопки с помощью якоря, прокручивает страницу рывком. Использование JS или jQuery помогает решить эту проблему сделав кнопку плавной прокрутки.
Предложенные решения на множестве сайтов обладают рядом недостатков. Наиболее часто встречаются решения в которых кнопка видима постоянно, даже если нет полос вертикальной прокрутки. Второй недостаток – необходимость добавлять в html код страницы сторонние элементы, которые формируют кнопку вверх вручную. Третий недостаток – ограничение на использование элементов. В одних случаях это только гиперссылка, в других только изображение.
Просмотрев кучу скриптов, выбрал наиболее оптимальный и дописал необходимый функционал. Итак, написанный скрипт формирует кнопку вверх, когда пользователь прокручивает страницу вниз более чем на один экран. Появление кнопки – плавное. Сама кнопка – это гиперссылка, в которую вы можете добавить любой элемент: и блоки, и изображения.
Добавлять в HTML код ничего не нужно. Кнопка добавляется автоматически. Итак, как добавить кнопку Вверх на сайт? Вначале подключите в head библиотеку jQuery.
|
1 2 3 4 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="/js/go_top.js"></script> </head> |
Затем подключите ниже библиотеку с кодом кнопки.
Для оформления кнопки добавьте в CSS два класса, которые описывают обычное состояние ссылки и ее hover состояние.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#go-top { position: fixed; bottom: 25px; right: 10px; cursor:pointer; display:none; width: 50px; height: 20px; background: #c0c0c0; } #go-top:hover { background: #333; } |
Как обычно, посмотреть решение можно на CodePen
See the Pen ZWWrdP by Alex (@Asmodey) on CodePen.
или скачать готовое с GitHub.
Вот таким образом реализуется плавная прокрутка скролла на jQuery , а также плавный вывод кнопки » Наверх » при соответствующем положении скролла.
Кстати, для тех, кто только изучает JS (для меня), использование jQuery, делает код непонятным((