Прокрутка к конкретной позиции

Для реализации прокрутки к конкретной позиции с помощью Locomotive Scroll необходимо сначала создать экземпляр библиотеки и настроить контейнер. Обычно контейнером выступает основной блок страницы с атрибутом data-scroll-container:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
});

Параметр smooth: true обеспечивает плавную анимацию прокрутки, а multiplier регулирует скорость движения. Без правильной инициализации прокрутка к позиции работать не будет.

Методы для прокрутки

Locomotive Scroll предоставляет встроенный метод scrollTo, который позволяет перемещать страницу к конкретной точке:

scroll.scrollTo(target, options);

  • target может быть:

    • Числом — пиксельное смещение от начала страницы.
    • CSS-селектором или DOM-элементом — элемент, к которому нужно прокрутиться.
    • 'top' или 'bottom' — начало или конец страницы.

  • options — объект с настройками анимации:

    • offset — смещение в пикселях от выбранной позиции.
    • duration — время анимации в миллисекундах.
    • easing — функция плавности, например 'easeInOutQuad'.

Пример прокрутки к элементу с идентификатором #section2 с небольшим смещением:

scroll.scrollTo('#section2', {
  offset: -100,
  duration: 1200,
  easing: 'easeInOutCubic',
});

Прокрутка к координатам

Если требуется прокрутка к конкретной позиции по оси Y или X, можно использовать числовые значения. Например, перемещение на 500 пикселей вниз:

scroll.scrollTo(500, {
  duration: 1000,
  easing: 'easeOutQuad',
});

При этом 0 соответствует верхней границе контейнера, а отрицательные значения учитываются как прокрутка выше начала.

Динамическое определение цели

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

const dynamicElement = document.querySelector('.dynamic-target');

scroll.scrollTo(dynamicElement, {
  offset: -50,
  duration: 800,
});

Использование DOM-элементов обеспечивает точную позицию даже при изменении высоты контента или адаптивной верстке.

Интеграция с событиями

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

document.querySelector('.scroll-button').addEventListener('click', () => {
  scroll.scrollTo('#target-section', {
    offset: -80,
    duration: 1000,
    easing: 'easeInOutQuart',
  });
});

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

Смещение и учёт фиксированных элементов

Если на странице присутствуют фиксированные элементы, такие как шапка или панель навигации, необходимо корректировать offset. Отрицательное значение сдвига позволит прокрутить контент ниже фиксированного блока, чтобы элемент оказался полностью видимым:

scroll.scrollTo('#section', { offset: -70, duration: 900 });

Анимация и easing-функции

Locomotive Scroll поддерживает стандартные easing-функции, такие как:

  • 'linear' — равномерная скорость.
  • 'easeInQuad', 'easeOutQuad', 'easeInOutQuad' — ускорение и замедление.
  • 'easeInCubic', 'easeOutCubic', 'easeInOutCubic' — более плавные кривые движения.

Применение правильной функции easing улучшает восприятие интерфейса и создаёт ощущение естественной прокрутки.

Отслеживание завершения прокрутки

Для запуска дополнительных действий после завершения анимации используется callback через promise или событие call:

scroll.scrollTo('#section', {
  offset: -50,
  duration: 1000,
  easing: 'easeInOutCubic',
}).then(() => {
  console.log('Прокрутка завершена');
});

Это позволяет синхронизировать анимацию элементов с прокруткой, например запускать fade-in или трансформации блоков.

Примеры комплексного использования

  1. Прокрутка к секции с разными скоростями для разных элементов:
const sections = document.querySelectorAll('.section');

sections.forEach((section, index) => {
  section.addEventListener('mouseenter', () => {
    scroll.scrollTo(section, {
      offset: -60,
      duration: 700 + index * 100,
      easing: 'easeInOutQuad',
    });
  });
});
  1. Прокрутка к позиции через числовое значение с динамическим offset:
const topOffset = document.querySelector('.header').offsetHeight;

scroll.scrollTo(1200, {
  offset: -topOffset,
  duration: 1200,
  easing: 'easeOutCubic',
});
  1. Комбинированная прокрутка к элементу и запуск анимации после:
scroll.scrollTo('#animate-section', { duration: 1000 }).then(() => {
  document.querySelector('#animate-section .box').classList.add('active');
});

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

Оглавление