Как сделать скролл клик
Обновлено: 07.07.2024
Приветствую, друзья, на страницах WebDevTips. Сегодня практических на всех лендингах вы сможете увидеть плавный скролл по клику к элементу. Это здорово помогает клиенту ориентироваться на сайте. Ведь удобно просто кликнуть по ссылке в меню, и сразу проскролить к выбранному элементу. Так же, плавная прокрутка к якорю служит элементом wow-дизайна для сайта. Как видите, плавная прокрутка не только красиво выглядит, но и помогает пользователям сайта. Давайте приступим к написанию.
Для начала подготовим само меню
Я сделал меню чисто для примера за несколько минут. Вам же нужно будет или скопировать его, и заменить в href id на ваши, или адаптировать даное меню под ваш сайт. Главным тут будет создать ссылки — а , и прописать в href id тех элементов, к которым вы и будете делать плавную прокрутку.
Далее подключаем jQuery
Я подключил с помощью CDN. Можете просто скопировать эту строчку и вставить в ваш файл.
Сам код для плавной прокрутки к якорю
1 — В этой строке просто указываем, при клике на какие ссылки будет происходить плавный скролл. У меня путь выглядит так: > li > a. Можете адаптировать данную строку под вашу вложенность.
1400 — это время самой прокрутки. Можете изменить данное число для ускорения или замедления анимации.
На этом все, сейчас прокрутка работает. Я так сделал для вас пример на Codepen.io . Вы можете сами зайти, и протестировать код. Так же, вы можете немного изменить его и поэкспериментировать с написанием.
Спасибо, что прочитали. Если у вас есть вопросы, смело задавайте их в комментариях. Постараюсь ответить так быстро, как смогу. Буду очень благодарен, если вы подпишитесь на мои Telegram и YouTube каналы.
После публикации статьи про скроллинг прошло достаточно много времени, а мир фронтенда очень динамичен и тренды и библиотеки очень быстро меняются.
Представляю вашему вниманию библиотеки скроллинга, которые популярны в 2021.
Плавная прокрутка – это современный стандарт веб-дизайна, который позволяет посетителю плавно прокручивать веб-страницу до определенной позиции.
В этой статье вы увидите подборку лучших библиотек написанных на JavaScript для плавной прокрутки. Все представленные библиотеки работают без каких-либо дополнительных плагинов или дополнений (например, jQuery).
Ориентированная на производительность, легкая библиотека анимации прокрутки, написанная на ванильном JavaScript. Sal была создана, чтобы обеспечить эффективное и легкое решение для анимации элементов при прокрутке. Она основана на Intersection Observer, который обеспечивает потрясающую производительность с точки зрения проверки наличия элемента в области просмотра.
Библиотека Scrollspy и Smooth Scroll – scrollspy.js
Данная библиотека отлично подходит для создания небольших сайтов и landing page. Она создаёт красивое плавающее меню вверху окна, в котором все содержание страницы связано с его пунктами. Таким образом, при прокрутке страницы вы будете постепенно перемещаться по пунктам основного меню.
Motus
Motus позволяет разработчикам создавать красивые анимации, имитирующие css keyframes и применяемые при прокрутке пользователем.
Native Smooth Scroll Polyfill – smoothscroll.js
smoothscroll.js – это легкий, настраиваемый полифилл Vanilla JavaScript для плавной прокрутки с использованием свойства CSS scroll-behavior: smooth.
Используйте этот полифилл для реализации функции плавной прокрутки в тех браузерах, которые не поддерживают её: MS Edge, Internet Explorer и Safari.
Butter.js – Создание эффектов прокрутки с плавным движением
Простая библиотека JavaScript, которая применяет плавную прокрутку импульса (также называемую инерционной прокруткой) к любым прокручиваемым элементам на странице.
Locomotive Scroll
Простая библиотека прокрутки, используемая разработчиками Locomotive. Созданный слой поверх виртуальной прокрутки ayamflow, обеспечивает плавную прокрутку с поддержкой эффектов параллакса, переключения классов и запуска отслеживания событий, когда элементы находятся в области просмотра.
Scroll To Anchor
Еще одна библиотека JavaScript с плавной прокруткой, которая плавно прокручивает страницу до определенных якорей со смещениями в документе. Таким образом, вы можете завязать ссылки на определенные части страницы и при нажатии на неё будет выполнена плавная прокрутка к нужному элементу.
Lax.js
Простая и легкая ванильная библиотека JavaScript для создания плавных и красивых анимаций при прокрутке.
Lax.js 2.0 была полностью переписана с упором на модульность и гибкость, предоставляя больше инструментов для создания потрясающих анимаций. Был добавлен новый синтаксис анимации JavaScript, позволяющий использовать более сложные комбинации эффектов, также анимациям можно придать инерцию при прокрутке.
Scroll animate to
Данная библиотека во многом похожа на предыдущую. Библиотека JavaScript scroll-animate-to анимирует прокрутку до указанной точки в документе.
Современная библиотека плавной прокрутки. Jump была разработана с учетом современного рабочего процесса JavaScript. Чтобы использовать её, рекомендуется иметь систему сборки, которая может переносить ES6 и связывать модули.
Rallax.js
Rallax.js – это ванильный плагин JS, который реализует эффект динамической прокрутки параллакса без зависимостей. Rallax.js упрощает создание эффекта параллакса для целевого HTML-элемента с высокой производительностью и надежным API. Сделайте либо базовый параллакс прокрутки, либо измените его с помощью автоматических обратных вызовов, запуска / остановки, изменения скорости и мобильной обработки.
T-scroll
Современная библиотека с открытием новых элементов при прокрутке, с полезными опциями и анимацией.
ScrollTrigger
Данная библиотека запускает классы для элементов html в зависимости от позиции прокрутки. Использует requestAnimationFrame, чтобы не мешать прокрутке пользователей.
Эта библиотека позволяет вам анимировать элементы при прокрутке вниз и вверх. Если вы прокрутите страницу обратно вверх, элементы будут анимированы до своего предыдущего состояния и будут готовы к анимации снова, если вы прокрутите вниз.
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)
Это значит не будет переходов, а стильно созданный scroll, который вы можете самостоятельно настроить по заданной скорости. В большинстве такую функцию вы могли наблюдать на одностраничных сайтах или портфолио, где в самом верху прописываем ключевые слова и выставляем под якорные ссылки.
И при заходе на такой интернет сайт, будет не сложно найти информацию, так как можно просто опуская страницу ознакомится с большой информацией. Или воспользоваться якорной ссылкой, где находим нужное ключевое слово и в один миг попадаем под нужное описание с первой строки или с названия того или иного материала. Это в зависимости, где вы закрепите якорь, там и остановится страница.
Где стразу рассмотрим несколько примеров:
Но начнем с основы:
Что такое якорные ссылки и для чего они нужны?
Как уже поняли, стоит посетителю сделать клик по ссылки или заданному элементу, к которому закреплена ссылка на якорь, то здесь он автоматически перемещается в ту часть страницы, где вы изначально закрепили якорь, все очень просто и не так сложно, что могло изначально показаться.
Как создать якорную ссылку?
Первый вариант:
Задаем ссылке через хэштег ссылку такого вида:
Потом, необходимо категориям или блоку до которого нужно прокрутить, а главное добавляем id с аналогичным именем, как href у ссылки, только здесь уже не нужен хэштег, где не забываем, что каждый id должен соответствовать своей ссылке.
Как сделать плавную прокрутку якоря на чистом JS?
Все просто, нужно скриптами добавляем следующий код:
for (let anchor of anchors) <
anchor.addEventListener('click', function (e) <
e.preventDefault()
const blockID = anchor.getAttribute('href').substr(1)
document.getElementById(blockID).scrollIntoView( <
behavior: 'smooth',
block: 'start'
>)
>)
>
На этом все, так как плавная прокрутка якорной ссылки полностью установлена.
Второй вариант:
В нашем случаи - это простой div блок. По сути, для простого перехода это все. При нажатии на такую ссылку, посетителя моментально перебросит на ту часть страницы где расположен блок с якорем.
Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.
Теперь после библиотеки, подключаем сам скрипт, который и будет осуществлять анимацию плавного перехода.
Во второй строке скрипта указывается айди блока с якорными ссылками. Как пример, можно организовать вот такой блок:
В одной из строк заданна цифра 1500, которая идет за время в миллисекундах, это значит ровно 1,5 секундам. Что вы самостоятельно задаете временной отрезок времени, а значит можете сделать плавный или быстрый скролл, так как за это время идет переход к нужному якорю.
.scroll() – устанавливает обработчик “прокрутки” элементов документа, либо, запускает это событие.
Метод имеет три варианта использования.
- handler — функция, которая будет установлена в качестве обработчика.
- eventData – объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате ;
- handler — функция, которая будет установлена в качестве обработчика.
В первых двух вариантах использования, метод является аналогом .on("scroll", handler) , а в третьем случае аналогом .trigger( "scroll" ) .
Событие scroll происходит, когда пользователь осуществляет прокрутку по элементу. Событие прокрутки отправляется всякий раз, когда изменяется положение прокрутки элемента, независимо от причины. Щелчок мышью или перетаскивание на полосе прокрутки, перетаскивание внутри элемента, нажатие клавиш со стрелками или использование колесика прокрутки мыши могут вызвать это событие.
Метод может быть применён для объекта window, а так же для других фрэймовых элементов, которым через CSS можно задать свойства scroll .
Дополнительно
Событие scroll() является лишь сокращением для .on("scroll", handler) , поэтому убрать установленный обработчик можно с помощью .off( "scroll" )
Пример
[codepen_embed height=”414″ theme_id=”0″ slug_hash=”BmQKbE” default_tab=”result” user=”AmateR”]See the Pen BmQKbE by Aleksei (@AmateR) on CodePen.[/codepen_embed]
Читайте также: