Цепочки вызовов

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

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

Или через npm:

npm install smooth-scroll

Инициализация производится следующим образом:

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

Ключевые параметры инициализации:

  • speed — время анимации прокрутки в миллисекундах.
  • offset — смещение от целевого элемента (удобно для фиксированных шапок).
  • easing — функция плавности анимации (linear, easeInOutCubic и др.).

Основы цепочек вызовов

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

Каждый вызов scroll.animateScroll() возвращает объект, на котором можно продолжать вызовы методов для управления событиями:

scroll.animateScroll(target, trigger, {
    speed: 800,
    offset: 50
}).then(() => {
    console.log('Прокрутка завершена');
});
  • target — целевой элемент или якорь (#section1 или document.querySelector('.section')).
  • trigger — элемент, инициирующий событие (опционально).
  • В качестве третьего параметра можно передать объект с локальными настройками.

Возвращаемый объект позволяет добавлять обработчики событий then, создавая цепочки действий после завершения прокрутки.

Использование animateScroll в цепочках

Smooth Scroll поддерживает последовательные вызовы для создания сложной логики:

scroll.animateScroll('#section1')
    .then(() => scroll.animateScroll('#section2', null, { speed: 1000 }))
    .then(() => scroll.animateScroll('#section3', null, { offset: 100 }));

Особенности такой конструкции:

  • Цепочка гарантирует последовательное выполнение анимаций.
  • Параметры каждой прокрутки можно задавать индивидуально.
  • Поддерживается использование async/await для упрощения синтаксиса:
async function scrollSequence() {
    await scroll.animateScroll('#section1');
    await scroll.animateScroll('#section2', null, { speed: 1200 });
    await scroll.animateScroll('#section3', null, { offset: 80 });
}
scrollSequence();

Обработка событий через цепочки

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

  • before — перед стартом прокрутки.
  • after — после завершения анимации.
  • cancel — если прокрутка была прервана пользователем.

Добавление обработчиков:

scroll.animateScroll('#section1')
    .then(() => console.log('Прокрутка завершена'))
    .catch(() => console.log('Прокрутка отменена'));

scroll.on('before', (event, anchor, toggle) => {
    console.log('Перед прокруткой', anchor);
});

scroll.on('after', (event, anchor) => {
    console.log('После прокрутки', anchor);
});

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

Настройка индивидуальных эффектов для элементов

Каждый элемент может иметь собственные настройки анимации:

document.querySelectorAll('a[data-scroll]').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        scroll.animateScroll(link.getAttribute('href'), link, {
            speed: 500,
            offset: 60,
            easing: 'easeOutQuart'
        });
    });
});

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

Комбинирование цепочек и таймингов

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

scroll.animateScroll('#section1')
    .then(() => new Promise(resolve => setTimeout(resolve, 300)))
    .then(() => scroll.animateScroll('#section2'))
    .then(() => console.log('Все секции пройдены'));

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

Работа с динамически добавляемыми элементами

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

scroll.refresh(); // обновляет все якорные ссылки и цели

Цепочки вызовов остаются корректными даже после добавления новых блоков, что важно для SPA или лендингов с подгружаемым контентом.

Применение цепочек к интерфейсу

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

  1. Навигация с последовательной прокруткой: Пошаговое пролистывание разделов сайта с задержкой между ними.
  2. Анимация лендингов: Сначала прокрутка к секции, затем запуск CSS-анимаций или JS-функций.
  3. Интерактивные презентации: Контроль порядка появления элементов и блоков с плавной прокруткой.

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

Оглавление