jQuery: Простая прокрутка до нужного элемента по клику
Сегодня делюсь с вами очень простым и удобным скриптом на jQuery, который по клику на элемент плавно прокручивает вас до заданного места на странице.
Ищу разработчиков: NodeJS, PHP, удалённая работа. Зарплата в € или $
— Backend: Необходим опыт работы в FinTech. Практика работы со Stripe будет большим плюсом.
— DevOps: Так же ищу админа веб серверов в команду со знанием Linux Debian или Ubuntu, Nginx
Как сделать скролл клик
Сначала в HTML реализуем обычный «грубый» переход к секции, а затем уже добавим jQuery для создания плавности скролла.
Добавим codeid секциям к которым мы хотим выполнять скролл, а ссылкам атрибут codehref в формате code#name . Решетка — означает идентификатор (id), а name — имя идентификатора.
Наш HTML файл получится примерно такой.
Атрибут href указывает к какому элементу необходимо осуществить переход.
1. Плавный скролл с используя jQuery
Чтобы добавить плавность перехода для необходимого элемента, просто добавьте навигации класс scrollto
Изменить скорость скролла можно поменяв значение duration
2. Плавный скролл для всех ссылок, начинающихся с #
Для этого мы обратимся к селектору атрибута тега a при помощи ^ — что будет означать, что мы выбираем все ссылки, начинающиеся с # (решётки)
3. Плавный скролл на чистом JavaScript — метод Element.scrollIntoView()
Будем использовать метод scrollIntoView(). Это стандартный нативный метод JavaScript.
У метода scrollIntoView() есть недостаток.
Если у нас будет навигация position: fixed , то нам необходимо добавить отступ сверху на x-пикселей , т.е. высоту навигации .
Для решения данной задачи отлично подойдёт метод Window.scrollBy() .
4. Плавный скролл на чистом JavaScript — метод Window.scrollBy()
Метод Window.scrollBy() имеет параметр top в котором мы укажем количество пикселей, на сколько нам необходимо прокрутить страницу.
От общей высоты документа отнимем высоту навигации и получим необходимое смещение в пикселях по оси Y .
Если нужен отступ сверху, укажите class элемента (навигации), чтобы вычислить его высоту. Если не нужен отступ, переменной topOffset присвойте значение 0 .
Как создать кнопку скроллинга на сайте
При прочтении статей с большим количеством информации встает необходимость установки кнопки прокрутки страницы. Кнопки скроллинга помогают быстро вернуться к началу страницы, перейти в конец или двигаться по блокам текста. Такую прокрутку можно сделать разными способами, их мы и рассмотрим.
Способ №1. Классическая кнопка «Вверх» с якорем-ссылкой
В редакторе шаблона в заголовке (header.php) перед закрывающимся тегом </head> либо в подвале (footer.php) перед </body> нужно поместить html-код:
Здесь id является идентификатором ссылки. Там же располагаем и формируем ссылку кнопки, при нажатии на которую мы перейдем к якорю.
Аналогичная схема применяется при работе с содержанием в статье, нажимая на пункты которого, мы отправляемся к нужному месту в тексте.
Ну а теперь посредством CSS стилей придаем ссылке вид и задаем ей необходимые характеристики.
Вместо текста «ВВЕРХ» можно использовать любое изображение, например стрелки. Тогда предыдущую ссылку заменяем на:
Этот способ достаточно легкий и не требует подключения библиотек и плагинов, тормозящих загрузку сайта. Единственным его недостатком является резкий переход к началу страницы. Результат:
Способ №2. Прокрутка «Вверх» с плавным переходом
Для плавного перехода к началу страницы необходимо подключиться к библиотеке jQuery и прописать Javascript.
Теперь при нажатии на кнопку прокрутки не будет резкого рывка к началу.
Способ №3. Кнопка прокрутки вверх и вниз
Зачастую возникает необходимость в прокрутке страницы не только вверх, но и вниз. Для этого прописываются коды для двух кнопок:
Способ №4. Кнопка прокрутки «перевертыш»
Оригинальность этого метода заключается в том, что на середине текста кнопка поворачивается либо вверх, либо вниз.
Способ №5. Кнопка прокрутки наверх и вниз
Нужно учесть, что кнопка прокрутки страницы в некоторых браузерах может не отразится. Выберите оптимальный вариант для себя, используйте свои характеристики и изображения кнопки скроллинга страниц.