Progressive enhancement

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

Прогрессивное улучшение основывается на трёх принципах:

Базовая функциональность работает всегда.
Дополнительные улучшения добавляются только при поддержке необходимых возможностей браузера.
Ошибки или отсутствие поддержки не должны ломать интерфейс.

Smooth Scroll идеально подходит под этот подход, так как обеспечивает улучшение поведения стандартного якорного перехода (<a href="#section">), не ломая его при отсутствии JavaScript.

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

Для использования Smooth Scroll необходимо подключить скрипт библиотеки:

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

После подключения создаётся экземпляр с указанием селектора ссылок, к которым применима плавная прокрутка:

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

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

speed — скорость анимации в миллисекундах.
speedAsDuration — если true, скорость будет интерпретироваться как длительность, а не как пиксели в секунду.
offset — смещение от целевого элемента (например, чтобы учитывать фиксированное меню).
easing — функция сглаживания движения, например 'easeInOutCubic'.

Использование этих параметров позволяет плавно интегрировать библиотеку в существующий сайт без нарушения базовой работы ссылок.

Применение прогрессивного улучшения

Для реализации прогрессивного улучшения необходимо:

Оставить стандартные якорные ссылки без изменения.
```
<a href="#section1">Перейти к разделу 1</a>
```
Даже при отсутствии JS они будут работать стандартным образом.
Активировать Smooth Scroll только если библиотека доступна.
```
if (typeof SmoothScroll !== 'undefined') {
  const scroll = new SmoothScroll('a[href*="#"]', { speed: 500 });
}
```
Это предотвращает ошибки на страницах, где скрипт не загружен или отключён.

Использовать data-атрибуты для индивидуальной настройки прокрутки. Например, можно задать смещение или скорость для конкретной ссылки:

<a href="#section2" data-scroll-speed="800" data-scroll-offset="50">Раздел 2</a>

В JavaScript можно считывать эти атрибуты при инициализации:

const scrollLinks = document.querySelectorAll('a[href*="#"]');
scrollLinks.forEach(link => {
  const speed = link.dataset.scrollSpeed || 600;
  const offset = link.dataset.scrollOffset || 0;
  new SmoothScroll(link, { speed: parseInt(speed), offset: parseInt(offset) });
});

Обработка навигации и прогрессивное улучшение

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

document.addEventListener('click', function(event) {
  const link = event.target.closest('a[href^="#"]');
  if (!link) return;
  event.preventDefault();
  scroll.animateScroll(document.querySelector(link.getAttribute('href')));
});

Такой подход гарантирует, что:

Плавная прокрутка срабатывает для всех ссылок, даже если они добавлены динамически.
Стандартная навигация (href) остаётся рабочей при отключенном JS.

Обратная совместимость и fallback

Smooth Scroll автоматически обеспечивает прогрессивное улучшение:

Если JavaScript отключен, ссылки работают как обычные якоря.
Если библиотека не загружена, стандартная прокрутка сохраняется.
Для старых браузеров можно подключить полифиллы через сборку smooth-scroll.polyfills.min.js, обеспечивая поддержку requestAnimationFrame и современных функций анимации.

Интеграция с фиксированными элементами

Для сайтов с фиксированными шапками или навигационными панелями важно учитывать смещение:

const scroll = new SmoothScroll('a[href*="#"]', {
  offset: function (anchor, toggle) {
    const headerHeight = document.querySelector('.header').offsetHeight;
    return headerHeight + 10; // Дополнительный отступ
  }
});

Использование функции в параметре offset позволяет динамически вычислять размер смещения в зависимости от текущего состояния интерфейса, что делает прокрутку адаптивной и безопасной для всех пользователей.

Работа с событиями Smooth Scroll

Библиотека поддерживает события, которые позволяют расширять функциональность без вмешательства в базовую навигацию:

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

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

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

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

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