Оглавления документов

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

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

После подключения создаётся экземпляр объекта SmoothScroll, который принимает селектор ссылок и объект с опциями:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 500,        // Продолжительность анимации прокрутки в миллисекундах
  offset: 50,        // Отступ от верха страницы после прокрутки
  easing: 'easeInOutCubic', // Функция плавности анимации
});

Ключевые параметры:

  • speed – определяет скорость скролла. Значение указывается в миллисекундах.
  • offset – позволяет задать смещение от целевого элемента, удобно для фиксированных шапок.
  • easing – контролирует тип кривой анимации. Smooth Scroll поддерживает несколько предустановленных функций: linear, easeInQuad, easeOutQuad, easeInOutCubic и другие.

Настройка и управление событиями

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

scroll.animateScroll(document.querySelector('#section1'), null, {
  speed: 700,
  offset: 100
});

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

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

Особенности событий:

  • scrollStart вызывается при начале анимации.
  • scrollStop срабатывает по завершении анимации.
  • В объекте event.detail содержится информация о целевом элементе и настройках анимации.

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

Библиотека Smooth Scroll позволяет инициировать прокрутку не только по клику на ссылку, но и программно. Для этого используется метод animateScroll:

scroll.animateScroll(document.querySelector('#target-element'));

Можно передавать дополнительный объект настроек, переопределяя параметры экземпляра. Это удобно для динамически создаваемых элементов и кнопок «Наверх» или «К следующему разделу».

Работа с фиксированными шапками и якорями

Проблема стандартного якорного скролла — перекрытие контента фиксированной шапкой. Smooth Scroll решает её через параметр offset:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,
  offset: 80 // Высота шапки
});

В сочетании с точной привязкой к идентификаторам элементов обеспечивается корректная прокрутка без обрезки заголовков и секций.

Интеграция с динамическими страницами

На SPA и динамически загружаемых страницах важно инициализировать Smooth Scroll после появления новых элементов:

function initSmoothScrollForNewLinks() {
  new SmoothScroll('a[href*="#"]', { speed: 500 });
}

// Пример использования с динамическим контентом
document.querySelector('#load-more').addEventListener('click', () => {
  // Добавление новых секций
  initSmoothScrollForNewLinks();
});

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

Расширенные возможности: кастомные функции и колбэки

Smooth Scroll поддерживает создание собственных кривых анимации и колбэков. Для этого можно использовать функцию easingPattern:

function customEasing(time) {
  return time < 0.5 ? 2*time*time : -1+(4-2*time)*time;
}

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

Также можно использовать колбэки на начало и конец прокрутки для сложной логики интерфейса:

scroll.animateScroll(document.querySelector('#section2'), null, {
  before: function(el) { console.log('Начало скролла к', el); },
  after: function(el) { console.log('Скролл завершен к', el); }
});

Совместимость и полифиллы

Smooth Scroll поддерживает современные браузеры, но при необходимости обеспечивается работа с устаревшими версиями через встроенные полифиллы для requestAnimationFrame и Element.prototype.closest. При использовании CDN достаточно подключить версию polyfills, чтобы скрипт корректно работал на всех популярных устройствах.

Практические рекомендации

  • Использовать offset при наличии фиксированных шапок.
  • Инициализировать Smooth Scroll после динамического добавления элементов.
  • Настраивать speed и easing для естественного ощущения прокрутки.
  • Использовать события scrollStart и scrollStop для синхронизации анимаций других элементов.

Эти методы позволяют создавать полноценные интерактивные оглавления и навигацию по странице с плавной анимацией, полностью контролируемой через JavaScript.

Оглавление