Базовая инициализация

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

CDN-подключение выполняется добавлением скрипта в HTML-файл:

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

Этот способ удобен для быстрого тестирования или небольших проектов.

Установка через npm подходит для современных проектов с использованием сборщиков:

npm install smooth-scroll

После установки библиотеку можно импортировать в JS-файл:

import SmoothScroll from 'smooth-scroll';

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

После подключения библиотеки создаётся экземпляр объекта SmoothScroll.

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 800,
  speedAsDuration: true,
});

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

  • 'a[href*="#"]' – CSS-селектор элементов, на которые будет навешено плавное скроллирование. Обычно это ссылки на якоря.
  • speed – время анимации в миллисекундах.
  • speedAsDuration – если true, значение speed интерпретируется как длительность анимации, а не как скорость движения.

Другие часто используемые опции:

Опция Описание Значение по умолчанию
offset Смещение от целевого элемента при скролле 0
easing Функция плавности анимации 'easeInOutCubic'
updateURL Обновлять URL после скролла true
popstate Обрабатывать события браузера (назад/вперёд) true

Параметры плавности скролла

Скорость и длительность

Параметр speed задаёт, сколько миллисекунд займет анимация. Значение speedAsDuration определяет, трактуется ли speed как фиксированная длительность или как скорость, зависящая от расстояния до цели.

Функции easing

Smooth Scroll поддерживает стандартные кривые плавности:

  • linear – равномерная скорость
  • easeInQuad – ускорение в начале
  • easeOutQuad – замедление в конце
  • easeInOutCubic – плавное ускорение и замедление

Пример кастомной функции easing:

const scroll = new SmoothScroll('a[href*="#"]', {
  easing: function (t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t * t + b;
    t -= 2;
    return c / 2 * (t * t * t + 2) + b;
  }
});

Прокрутка до элемента программно

Smooth Scroll позволяет инициировать скролл не только по клику на ссылку, но и программно:

const scroll = new SmoothScroll();
const target = document.querySelector('#section2');
scroll.animateScroll(target, null, {
  speed: 1000,
  offset: 50
});
  • Первый аргумент – целевой элемент или якорь.
  • Второй аргумент – ссылка, от которой вычисляется смещение (может быть null).
  • Третий аргумент – объект с опциями, аналогичный инициализации.

Настройка смещения и корректировка положения

Смещение (offset) позволяет оставлять пространство сверху элемента, что полезно при фиксированных шапках:

const scroll = new SmoothScroll('a[href*="#"]', {
  offset: 100,
  speed: 600
});

При необходимости смещение можно вычислять динамически:

const headerHeight = document.querySelector('.header').offsetHeight;

const scroll = new SmoothScroll('a[href*="#"]', {
  offset: function () {
    return headerHeight;
  },
  speed: 700
});

Обработка URL и истории браузера

Smooth Scroll может автоматически обновлять URL после перехода к якорю. Опция updateURL отвечает за это:

const scroll = new SmoothScroll('a[href*="#"]', {
  updateURL: true,
  popstate: true
});

Если пользователь нажимает кнопку «назад», библиотека вернёт страницу к предыдущему положению.

Поддержка мобильных устройств

Библиотека Smooth Scroll корректно работает на мобильных устройствах и планшетах. Плавность анимации сохраняется, а события сенсорного скролла учитываются. При необходимости можно отключить анимацию на устройствах с маленьким экраном или низкой производительностью:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,
  disable: function () {
    return window.innerWidth < 768;
  }
});

Отслеживание событий

Smooth Scroll предоставляет возможность подписываться на события:

document.addEventListener('scrollStart', function (event) {
  console.log('Скролл начался', event);
});

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

События scrollStart и scrollStop позволяют интегрировать анимацию других элементов во время движения страницы.

Вывод

Базовая инициализация Smooth Scroll сводится к подключению библиотеки, созданию экземпляра и настройке ключевых параметров: селектора, скорости, смещения и кривой плавности. Благодаря гибкой системе опций возможно как простое подключение для плавного скролла по якорям, так и сложные сценарии с динамическим смещением, кастомными easing-функциями и управлением истории браузера.

Оглавление