Плагин отнесен в категорию smooth scroll
Page scroll to id
(204 общий рейтинг)
Создайте ссылки, которые плавно прокручивают страницу до любого ID в документе.
malihu 100 000+ активных установок Протестирован с 6.1.1 Обновлен 2 дня назад
MouseWheel Smooth Scroll
(34 общий рейтинг)
Плавная прокрутка с помощью колесика мыши, тачпада или клавиатуры
KubiQ 50 000+ активных установок Протестирован с 5.9.5 Обновлен 11 месяцев назад
jQuery Smooth Scroll
(47 общий рейтинг)
Activate the plugin for smooth scrolling and smooth «back to top» feature.
Digital Liberation 20 000+ активных установок Протестирован с 5.2.17 Обновлен 3 года назад
Smooth Scroll Page Up/Down Buttons
(19 общий рейтинг)
Smooth Scroll Page Up/Down Buttons adds buttons that enables your site visitors to easily scroll…
Mark Senff 3 000+ активных установок Протестирован с 5.
7.8
Обновлен 2 года назадScroll to Top Button
(8 общий рейтинг)
Displays a button in the bottom right corner for smooth scrolling to the top of…
Rene Puchinger 2 000+ активных установок Протестирован с 5.6.10 Обновлен 2 года назад
Surbma | Smooth Scroll
(11 общий рейтинг)
A very simple and lightweight smooth scroll plugin.
Surbma 2 000+ активных установок Протестирован с 5.8.6 Обновлен 1 год назад
Scrollbar by webxapp — Best vertical/horizontal scrollbars plugin
(6 общий рейтинг)
WordPress custom scrollbar is highly customizable WordPress plugin. Features include vertical and/or horizontal scrollbar(s), adjustable…
WebXApp 1 000+ активных установок Протестирован с 5.
5.11
Обновлен 2 года назадEasy Smooth Scroll Links
(2 общий рейтинг)
Create anchors and add up to to 30 scrolling animation effects to links that link…
Andrew Matt 800+ активных установок Протестирован с 4.5.28 Обновлен 6 лет назад
Smooth Scroll
(5 общий рейтинг)
By default our browsers have scroll not smooth. It seem lag when mouse wheel. A…
Nguyen Khanh Dien 800+ активных установок Протестирован с 4.2.34 Обновлен 8 лет назад
Anchor smooth scroll
(1 общий рейтинг)
Аdds a smooth scroll to the anchors.
inprocess 300+ активных установок Протестирован с 4.9.22 Обновлен 4 года назад
Top Smooth Scroll
A complete plugin to add smooth scroll to your WordPress Website, Smooth Scroll To Top,…
Digital Ad Quest 200+ активных установок Протестирован с 4.
8.21
Обновлен 6 лет назадWP-Smooth-Scroll
(1 общий рейтинг)
WP-Smooth-Scroll is a plugin that helps users to scroll smoothly to top of the page.
Ahmedur Rahman Shovon 200+ активных установок Протестирован с 3.7.41 Обновлен 9 лет назад
Smoothscroll
(0 общий рейтинг)
Adds smoothscrolling to your website for better user experience.
Mitch 100+ активных установок Протестирован с 4.7.25 Обновлен 6 лет назад
WP LocalScroll
(6 общий рейтинг)This plugin will animate a regular anchor navigation with a smooth scrolling effect.
Rabbett Designs 100+ активных установок Протестирован с 3.7.41 Обновлен 9 лет назад
Yet Another Smooth Scroll
(2 общий рейтинг)
Customisable SmoothScroll plugin for WordPress
Samu József 100+ активных установок Протестирован с 4.
4.29
Обновлен 7 лет назадSimple Scroll Up Button
(1 общий рейтинг)
Simple Scroll Up Button is a lightweight plugin which adds a simple scroll up button…
WordPress Forest 20+ активных установок Протестирован с 5.4.12 Обновлен 2 года назад
Smooth-scroll-to-top
Scroll to top with nice jquery scroll effect and get a nice browser slider
Golam Dostogir 20+ активных установок Протестирован с 3.6.1 Обновлен 9 лет назад
Egenius Go Up
(0 общий рейтинг)
This plugin will add Scroll to Top on your wordpress theme.
Hassan Kibria 10+ активных установок Протестирован с 3.9.40 Обновлен 8 лет назад
14 js библиотек для работы со скроллингом
Содержание:
- Sal
- Библиотека Scrollspy и Smooth Scroll — scrollspy.
js - Motus
- Native Smooth Scroll Polyfill – smoothscroll.js
- Butter.js — Создание эффектов прокрутки с плавным движением
- Locomotive Scroll
- Scroll To Anchor
- Lax.js
- Scroll animate to
- Jump
- Rallax.js
- T-scroll
- ScrollTrigger
- AOS
jsПосле публикации статьи про скроллинг прошло достаточно много времени, а мир фронтенда очень динамичен и тренды и библиотеки очень быстро меняются.
Представляю вашему вниманию библиотеки скроллинга, которые популярны в 2021.
Плавная прокрутка — это современный стандарт веб-дизайна, который позволяет посетителю плавно прокручивать веб-страницу до определенной позиции.
В этой статье вы увидите подборку лучших библиотек написанных на JavaScript для плавной прокрутки. Все представленные библиотеки работают без каких-либо дополнительных плагинов или дополнений (например, jQuery).
к содержанию ↑
Sal
Ориентированная на производительность, легкая библиотека анимации прокрутки, написанная на ванильном JavaScript.
Скачать Смотреть
к содержанию ↑
Данная библиотека отлично подходит для создания небольших сайтов и landing page. Она создаёт красивое плавающее меню вверху окна, в котором все содержание страницы связано с его пунктами. Таким образом, при прокрутке страницы вы будете постепенно перемещаться по пунктам основного меню.
Демо Скачать
к содержанию ↑
Motus
Motus позволяет разработчикам создавать красивые анимации, имитирующие css keyframes и применяемые при прокрутке пользователем.
Демо Скачать
к содержанию ↑
smoothscroll.js — это легкий, настраиваемый полифилл Vanilla JavaScript для плавной прокрутки с использованием свойства CSS scroll-behavior: smooth.
Используйте этот полифилл для реализации функции плавной прокрутки в тех браузерах, которые не поддерживают её: MS Edge, Internet Explorer и Safari.
Демо Скачать
к содержанию ↑
Butter.js — Создание эффектов прокрутки с плавным движением
Простая библиотека JavaScript, которая применяет плавную прокрутку импульса (также называемую инерционной прокруткой) к любым прокручиваемым элементам на странице.
Демо Скачать
к содержанию ↑
Простая библиотека прокрутки, используемая разработчиками Locomotive. Созданный слой поверх виртуальной прокрутки ayamflow, обеспечивает плавную прокрутку с поддержкой эффектов параллакса, переключения классов и запуска отслеживания событий, когда элементы находятся в области просмотра.
Демо Скачать
к содержанию ↑
Еще одна библиотека JavaScript с плавной прокруткой, которая плавно прокручивает страницу до определенных якорей со смещениями в документе.
Таким образом, вы можете завязать ссылки на определенные части страницы и при нажатии на неё будет выполнена плавная прокрутка к нужному элементу.
Демо Скачать
к содержанию ↑
Lax.js
Простая и легкая ванильная библиотека JavaScript для создания плавных и красивых анимаций при прокрутке.
Lax.js 2.0 была полностью переписана с упором на модульность и гибкость, предоставляя больше инструментов для создания потрясающих анимаций. Был добавлен новый синтаксис анимации JavaScript, позволяющий использовать более сложные комбинации эффектов, также анимациям можно придать инерцию при прокрутке.
Демо Скачать
к содержанию ↑
Данная библиотека во многом похожа на предыдущую. Библиотека JavaScript scroll-animate-to анимирует прокрутку до указанной точки в документе.
Демо Скачать
к содержанию ↑
Jump
Современная библиотека плавной прокрутки.
Jump была разработана с учетом современного рабочего процесса JavaScript. Чтобы использовать её, рекомендуется иметь систему сборки, которая может переносить ES6 и связывать модули.
Демо Скачать
к содержанию ↑
Rallax.js
Rallax.js — это ванильный плагин JS, который реализует эффект динамической прокрутки параллакса без зависимостей. Rallax.js упрощает создание эффекта параллакса для целевого HTML-элемента с высокой производительностью и надежным API. Сделайте либо базовый параллакс прокрутки, либо измените его с помощью автоматических обратных вызовов, запуска / остановки, изменения скорости и мобильной обработки.
Демо Скачать
к содержанию ↑
Современная библиотека с открытием новых элементов при прокрутке, с полезными опциями и анимацией.
Демо Скачать
к содержанию ↑
Данная библиотека запускает классы для элементов html в зависимости от позиции прокрутки.
Использует requestAnimationFrame, чтобы не мешать прокрутке пользователей.
Демо Скачать
к содержанию ↑
AOS
Эта библиотека позволяет вам анимировать элементы при прокрутке вниз и вверх. Если вы прокрутите страницу обратно вверх, элементы будут анимированы до своего предыдущего состояния и будут готовы к анимации снова, если вы прокрутите вниз.
Демо Скачать
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
css, html, javascript, jquery, web, Модуль, плагин
Romuald Shmidtelson
Поделиться постом:
Предотвращение плавной прокрутки с помощью JavaScript
CSS и HTML, Javascript, 31 января 2022 г., 3 минуты чтения
С помощью scroll-behavior: smooth в вашем CSS вы можете указать браузерам анимировать прокрутку к различным частям вашего сайта, например, при ссылке на идентификатор на странице.
API javascript scrollTo имеет параметр поведения , который позволяет включать плавную прокрутку для одной конкретной прокрутки независимо от того, установлен CSS или нет.
Но что, если вы хотите сделать наоборот: отключить плавную прокрутку для определенного скролла, даже если она включена в CSS?
Видите ли, свойство поведения для scrollTo API имеет две опции:
-
smooth, для плавной прокрутки .
MDN говорит, что auto «происходит мгновенно, одним прыжком», но на данный момент в браузерах это не так.
Если вы используете
scroll-behavior: smoothв своем CSS, не забудьте обернуть его в@media (prefers-reduced-motion: no-preference) { }media query для доступности.
Согласно спецификации CSSOM, на которую он ссылается, доступны только два варианта.
окно.scrollTo({
топ: 1000,
поведение: «авто» | 'гладкий'
})
И со значением auto спецификация объясняет, что поведение должно возвращаться к значению, указанному в CSS.
Значит, если на странице в CSS включена плавная прокрутка, вам просто не повезло? Поведение : 'smooth' будет явно плавной прокруткой, а поведение : 'auto' будет плавной прокруткой, потому что это поведение страницы. Вам нужно перезаписать CSS перед прокруткой, а затем установить его обратно после того, как вы закончите?
К счастью, нет.
Оказывается, MDN немного опережает браузеры, потому что ссылается на текущий проект редактора, а не на рабочий проект. В рабочем проекте есть дополнительная опция: «мгновенная», которую поддерживают и Chrome, и Firefox.
К сожалению, текущий черновик редактора удалил значение мгновенного .
В чем разница между редакцией и рабочим проектом?
Редакторский черновик — это последняя версия черновика спецификации, которая обновляется по мере работы над ним редактора. С другой стороны, рабочий проект был опубликован для рассмотрения сообществом.
Но как насчет этого мгновенного значения ?
При установке поведения на Instant , функция scrollTo будет мгновенно прокручиваться до новой позиции без какой-либо анимации, независимо от того, какое scroll-behavior было установлено в CSS, по крайней мере, в Chrome и Firefox. Ура!
окно.scrollTo({
топ: 1000,
поведение: «мгновенно»
})
С поведением : 'instant' мы можем добиться того, чего хотим: отключить плавную прокрутку для определенной прокрутки, даже если scroll-behavior для элемента прокрутки установлено значение гладкий .
Добавить (назад) в спецификацию?
Я не первый, кто заметил эту проблему, как вы можете видеть в этой проблеме GitHub за 2019 год с просьбой вернуть «мгновенный». Уточнение поведения прокрутки: «авто» # 3497.
Думаю, понятно, что форсирование мгновенной прокрутки должно быть частью API.
Текущий редакционный черновик кажется для конкретных ситуаций:
-
плавная: всегда плавная прокрутка -
авто: использовать поведение прокрутки для элемента, установленное на
И нет явного способа предотвратить плавную прокрутку. Учитывая, что и Firefox, и Chrome реализуют функцию Instant , кажется разумным добавить ее обратно в спецификацию. Stack Overflow
Как сместить прокрутку (около 70 пикселей), чтобы отображался весь блок? Я пытался сделать так: var targetOffset = $target.offset().top — 70;.
jQuery Smooth Scroll Offset — Stack Overflow
Добавить смещение для плавной прокрутки с помощью панели навигации с помощью кнопок
JavaScript scrollIntoView плавная прокрутка и смещение — Stack Overflow
Как получить значения смещения Smooth-Scrollbar? — Переполнение стека
Вернуться к началу страницы stackoverflow.com
Гладкая прокрутка на чистом CSS со смещением — CodePen
codepen.
io › joncronin › ручка › BajdxwX
Гладкая
. 12. . 13. <раздел>. 14.Пролистайте
. 15. . 16. <раздел> … Гладкий. Прокрутите. С. Offset …Smooth Scroll Offset Anchor Links with CSS — Spigot Design
spigotdesign.com › Разработка
08.04.2020 · Пара быстрых фрагментов CSS, которые позволяют плавно прокручивать якорные ссылки, которые также смещаются для фиксированных заголовки. Это тот, который работает!
Компонент плавной прокрутки — документация UIkit
getuikit.com › docs › smooth-scroll
Параметр offset добавляет заданное расстояние до цели при расчете положения прокрутки. Смещение передается через атрибут данных. Значение может быть …
Смещение с плавной прокруткой — Lightrun
lightrun.com › ответы › stipsan-smooth-scroll-into-…
Опция смещения добавляет указанное расстояние до цели, когда вычисление положения прокрутки. Смещение передается через атрибут данных.
Значение… Читать…
scroll-padding-top — CSS: каскадные таблицы стилей — MDN Web Docs
developer.mozilla.org › References › CSS
26.09.2022 оптимальный … Смещение внутрь от верхнего края окна прокрутки, …
Мобильное смещение гладкой прокрутки не работает — WordPress.org
wordpress.org › support › theme › mobile-smooth-sc…
[Эта тема закрыта.] Независимо от того, какое значение я установил для Mobile Smooth Scroll Offset, оно не работает. Я пробовал другие плагины, такие как «Прокрутка…
Гладкая прокрутка | Foundation for Sites 6 Docs
get.foundation › sites › docs › smooth-scroll
Обеспечивает плавную прокрутку внутренних ссылок. … data-offset, number, 0, Количество пикселей для смещения прокрутки страницы при щелчке элемента при использовании липкой навигации …
Плавная прокрутка страницы до привязки со смещением — сценарий CSS
www .cssscript.