Установка и подключение

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

Подключение через CDN

Самый простой способ начать работу — подключение библиотеки через CDN. Необходимо добавить тег <script> в конец <body> или в <head> с атрибутом defer:

<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.polyfills.min.js" defer></script>
  • @16 — указывает версию библиотеки.
  • smooth-scroll.polyfills.min.js — версия с поддержкой старых браузеров, включая полифиллы для requestAnimationFrame и Element.closest.

Подключение через CDN удобно для быстрого прототипирования, так как не требует установки через npm или локального хранения файлов.

Установка через npm

Для проектов с использованием сборщиков модулей (Webpack, Vite, Parcel) библиотеку можно установить через npm:

npm install smooth-scroll

После установки импортировать Smooth Scroll можно следующим образом:

import SmoothScroll from 'smooth-scroll';

Если используется CommonJS (например, Node.js с require):

const SmoothScroll = require('smooth-scroll');

Такой способ подключения позволяет интегрировать библиотеку в современный фронтенд-код, использовать tree-shaking и настраивать параметры через объект инициализации.

Инициализация библиотеки

После подключения скрипта библиотеку необходимо инициализировать. Минимальный пример:

const scroll = new SmoothScroll('a[href*="#"]');
  • 'a[href*="#"]' — селектор ссылок, по которым будет применяться плавная прокрутка.
  • По умолчанию Smooth Scroll отслеживает все клики по ссылкам и плавно прокручивает страницу к элементу с указанным id.

Параметры и конфигурация

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

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 800,           // Время прокрутки в миллисекундах
  speedAsDuration: true, // Использовать указанное время как абсолютное
  offset: 50,            // Смещение от верхней границы
  easing: 'easeInOutCubic', // Функция плавности анимации
  updateURL: false,       // Обновлять URL при прокрутке
  popstate: true          // Обрабатывать события навигации браузера
});
  • speed — определяет скорость анимации. Без speedAsDuration скорость зависит от расстояния до цели.
  • offset — полезен, если на странице есть фиксированное верхнее меню, чтобы целевой элемент не скрывался за ним.
  • easing — задаёт кривую анимации. Доступны стандартные варианты: linear, easeInQuad, easeOutCubic и др.
  • updateURL — при true адресная строка меняется на #id элемента после прокрутки.
  • popstate — если включено, прокрутка будет реагировать на навигацию назад/вперед браузера.

Подключение локального файла

Если не используется CDN или npm, можно скачать библиотеку с официального репозитория и разместить в проекте, например в папке js/:

<script src="js/smooth-scroll.polyfills.min.js" defer></script>

После этого инициализация выполняется так же, как при подключении через CDN.

Совместимость и рекомендации

  • Smooth Scroll поддерживает современные браузеры, включая мобильные. Полифиллы обеспечивают работу в старых версиях IE.
  • Подключение скрипта с defer гарантирует, что все элементы DOM будут загружены перед инициализацией.
  • Для SPA или динамически подгружаемых страниц рекомендуется повторно инициализировать библиотеку после добавления новых ссылок или элементов на страницу.

Проверка работы

После подключения и инициализации библиотеки необходимо убедиться, что ссылки с якорями корректно плавно прокручивают страницу. Для теста можно использовать простой HTML:

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

<section id="section1" style="height:100vh;">Секция 1</section>
<section id="section2" style="height:100vh;">Секция 2</section>

При клике на ссылки страница должна плавно прокручиваться к соответствующему элементу с учётом указанных настроек.

Оглавление