Vanilla JavaScript

Для начала необходимо подключить библиотеку Smooth Scroll. В чистом JavaScript это можно сделать двумя способами: через CDN или установкой через npm/yarn для сборщиков проектов.

Через CDN:

<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.polyfills.min.js"></script>

Через npm:

npm install smooth-scroll

После установки через npm подключение в проекте будет выглядеть так:

import SmoothScroll from 'smooth-scroll';

Инициализация Smooth Scroll

После подключения библиотеки её необходимо инициализировать. Основной способ инициализации – создание нового объекта SmoothScroll и передача селектора ссылок, по которым будет выполняться плавная прокрутка.

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 500,
  speedAsDuration: true,
  offset: 0,
  easing: 'easeInOutCubic',
});

Пояснение параметров:

  • speed – время прокрутки в миллисекундах.
  • speedAsDuration – если true, значение speed используется как фиксированная длительность, иначе скорость зависит от расстояния.
  • offset – смещение от целевого элемента (например, для фиксированных шапок).
  • easing – функция плавности прокрутки. Поддерживаются: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint.

Основные возможности

Плавная прокрутка к элементу

Библиотека позволяет прокручивать страницу к элементу не только через клики по ссылкам, но и программно:

scroll.animateScroll(document.querySelector('#section2'));

При этом можно передать дополнительные параметры, такие как смещение и скорость:

scroll.animateScroll(document.querySelector('#section3'), null, {
  speed: 800,
  offset: 50,
});

Прокрутка с якорями

Smooth Scroll автоматически перехватывает клики по ссылкам с хешами:

<a href="#section1">Перейти к секции 1</a>

Библиотека вычисляет координаты элемента и плавно прокручивает страницу, учитывая заданные параметры.

Расширенные настройки

Smooth Scroll поддерживает множество дополнительных опций:

  • clip – если true, прокрутка останавливается точно у верхнего края элемента.
  • updateURL – если true, хеш в URL обновляется при прокрутке.
  • popstate – если true, прокрутка учитывает действия браузера «Назад/Вперед».
  • header – селектор фиксированного хедера для автоматического смещения.
  • offset может быть функцией, что позволяет динамически вычислять смещение в зависимости от состояния страницы.

Пример использования динамического смещения:

const scroll = new SmoothScroll('a[href*="#"]', {
  offset: function (anchor, toggle) {
    return document.querySelector('header').offsetHeight;
  },
});

Методы управления прокруткой

  • animateScroll(target, toggle, options) – инициирует прокрутку к указанному элементу.
  • destroy() – отключает Smooth Scroll, снимая обработчики событий.
  • cancel() – прекращает текущую анимацию прокрутки.
  • init() – повторная инициализация после динамического добавления ссылок.

Использование событий

Smooth Scroll позволяет работать с событиями, которые срабатывают на разных этапах прокрутки.

document.addEventListener('scrollStart', function(event) {
  console.log('Прокрутка началась', event);
});

document.addEventListener('scrollStop', function(event) {
  console.log('Прокрутка завершена', event);
});

События:

  • scrollStart – при начале прокрутки.
  • scrollStop – при завершении прокрутки.
  • scrollCancel – если анимация была отменена пользователем.

Оптимизация для сложных страниц

  1. Фиксированные шапки – использовать параметр header или динамическое offset.
  2. Многоярусная прокрутка – инициализация на всех внутренних ссылках и кнопках.
  3. Динамический контент – при добавлении новых якорей нужно вызывать init() для повторной регистрации ссылок.

Практические советы

  • Для плавности используйте easeInOutCubic или easeInOutQuart, они создают естественное ощущение прокрутки.
  • Если на странице есть элементы с высотой, изменяющейся при скролле, лучше использовать функцию offset.
  • Для SEO лучше оставлять updateURL: true, чтобы хеши корректно отображались в адресной строке.
  • При работе с SPA (Single Page Application) использовать animateScroll программно для переходов между секциями.

Smooth Scroll в Vanilla JavaScript обеспечивает легкую и настраиваемую анимацию прокрутки без необходимости подключать большие фреймворки, позволяя создавать современный UX с минимальными усилиями.

Оглавление