Простейший пример использования

Для начала работы с Smooth Scroll необходимо подключить библиотеку к проекту. Она доступна как через CDN, так и через пакетный менеджер npm.

CDN-подключение:

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

Через npm:

npm install smooth-scroll

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

import SmoothScroll from 'smooth-scroll';

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

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

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

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

  • a[href*="#"] — CSS-селектор ссылок на якоря. Используется любой элемент <a> с атрибутом href, содержащим #.
  • speed — скорость прокрутки в миллисекундах.
  • speedAsDuration — если true, то скорость задается как точная длительность анимации. Если false, прокрутка будет зависеть от расстояния до цели.

Простое использование с якорями

Создадим HTML-структуру с несколькими секциями и якорными ссылками:

<nav>
  <ul>
    <li><a href="#section1">Секция 1</a></li>
    <li><a href="#section2">Секция 2</a></li>
    <li><a href="#section3">Секция 3</a></li>
  </ul>
</nav>

<section id="section1">Контент секции 1</section>
<section id="section2">Контент секции 2</section>
<section id="section3">Контент секции 3</section>

После инициализации Smooth Scroll клики по ссылкам будут плавно прокручивать страницу к соответствующей секции.

Настройка дополнительных параметров

Smooth Scroll предоставляет ряд опций для тонкой настройки поведения:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,                 // Скорость анимации
    offset: 50,                 // Смещение от верхнего края страницы
    easing: 'easeInOutCubic',   // Функция плавности
    updateURL: true,            // Обновление URL при прокрутке
    popstate: true              // Поддержка кнопок «назад» и «вперед»
});

Описание ключевых параметров:

  • offset — позволяет задать смещение, полезно для фиксированных шапок.
  • easing — функция плавности, поддерживаются стандартные варианты: linear, easeInQuad, easeOutQuad, easeInOutCubic.
  • updateURL — при true клик по ссылке меняет адрес в адресной строке без перезагрузки.
  • popstate — при true браузер корректно обрабатывает навигацию кнопками назад/вперед.

Программное управление прокруткой

Smooth Scroll позволяет управлять прокруткой через методы JS:

// Прокрутка к элементу с id 'section2'
scroll.animateScroll(document.querySelector('#section2'));

// Прокрутка на определенную позицию страницы
scroll.animateScroll(500);

Метод animateScroll принимает:

  • DOM-элемент или селектор.
  • Числовое значение — координату по оси Y.
  • Объект с переопределением настроек для конкретного вызова.

Работа с колбэками

Для отслеживания событий прокрутки можно использовать колбэки:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    after: function(target, anchor, scrollEvent) {
        console.log('Прокрутка завершена до', target.id);
    },
    before: function(target, anchor, scrollEvent) {
        console.log('Начинаем прокрутку к', target.id);
    }
});
  • before вызывается до начала анимации.
  • after вызывается после завершения прокрутки.

Поддержка динамических элементов

Smooth Scroll автоматически работает с элементами, добавленными после инициализации, если пересоздать экземпляр:

scroll.destroy();   // Удаление текущих обработчиков
scroll.init();      // Повторная инициализация для новых ссылок

Вывод

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

Оглавление