init() - инициализация экземпляра

Инициализация экземпляра Smooth Scroll в JavaScript начинается с вызова метода init(), который подготавливает библиотеку к управлению плавной прокруткой страницы. Метод отвечает за связывание ссылок с соответствующими якорями и установку всех необходимых параметров анимации, включая скорость, смещение и поведение при навигации.

Создание экземпляра Smooth Scroll

Для работы с библиотекой необходимо создать объект Smooth Scroll, передав в конструктор селектор ссылок и опции конфигурации:

const scroll = new SmoothScroll('a[href^="#"]', {
    speed: 800,
    offset: 100,
    easing: 'easeInOutCubic',
});
  • 'a[href^="#"]' — CSS-селектор, определяющий элементы, которые будут реагировать на плавную прокрутку.
  • speed — время анимации в миллисекундах.
  • offset — смещение от верхнего края окна браузера после прокрутки.
  • easing — функция сглаживания движения, контролирующая скорость на разных участках анимации.

Вызов init()

Метод init() применяется для активации Smooth Scroll после создания экземпляра:

scroll.init();

Он выполняет следующие действия:

  1. Поиск элементов: сканирует DOM по заданному селектору и собирает все ссылки с якорями.
  2. Привязка событий: добавляет обработчики click на ссылки, предотвращая стандартное поведение браузера и вызывая кастомную анимацию.
  3. Подготовка к прокрутке: вычисляет текущие координаты целевых элементов и учитывает заданные offset и easing.
  4. Ведение истории: при необходимости обновляет URL с якорем без перезагрузки страницы, если включена соответствующая опция (updateURL: true).

Настройка через опции

При вызове init() можно полагаться на конфигурацию, переданную при создании экземпляра. Ключевые опции:

  • speedAsDuration — если true, скорость прокрутки будет восприниматься как фиксированное время, а не как пропорциональное расстоянию.
  • clip — обрезает значение прокрутки, чтобы элемент не уходил за верхний край окна.
  • easingPattern — позволяет использовать кастомные функции easing, например:
function easeOutQuart(t, b, c, d) {
    t /= d;
    t--;
    return -c * (t*t*t*t - 1) + b;
}

Автоматическая инициализация

В последних версиях Smooth Scroll поддерживается автоматическая инициализация, когда метод init() вызывается сразу после подключения скрипта. Пример:

document.addEventListener('DOMContentLoaded', function() {
    const scroll = new SmoothScroll('a[href^="#"]');
    scroll.init();
});

Это гарантирует, что все элементы DOM будут загружены до привязки событий.

Управление динамическими элементами

Если на страницу добавляются новые якорные ссылки после первичной инициализации, необходимо вызвать refresh() экземпляра:

scroll.refresh();

Метод повторно сканирует DOM и привязывает обработчики к новым элементам. Без этого новые ссылки не будут реагировать на плавную прокрутку.

Примеры нестандартного использования init()

  1. Отключение URL-обновления:
const scroll = new SmoothScroll('a[href^="#"]', {
    updateURL: false
});
scroll.init();
  1. Использование разного смещения для разных якорей:
const scroll = new SmoothScroll('a[href^="#"]', {
    offset: (anchor, toggle) => {
        if (anchor.id === 'top') return 0;
        return 50;
    }
});
scroll.init();
  1. Комбинация с другими скриптами навигации:
const scroll = new SmoothScroll('a[href^="#"]', {
    speed: 600,
    easing: 'easeInOutCubic'
});
scroll.init();

// Дополнительно можно синхронизировать с кастомной подсветкой меню
document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', () => highlightMenu(link));
});

Важные нюансы

  • init() необходимо вызывать после создания экземпляра и после полной загрузки DOM.
  • Опции, переданные в конструктор, применяются только при первом вызове init(). Для изменения параметров после инициализации требуется пересоздание экземпляра.
  • Метод init() не возвращает значение, его задача исключительно подготовка и активация скрипта.

Метод init() является ключевым элементом работы с Smooth Scroll, обеспечивая корректную привязку ссылок, обработку анимации и управление навигацией на странице. Он позволяет гибко настраивать поведение прокрутки через опции и легко интегрируется в динамические интерфейсы.

Оглавление