Параметры метода scrollTo

Метод scrollTo используется для программного управления прокруткой страницы или конкретного контейнера, управляемого библиотекой Locomotive Scroll. Он позволяет плавно перемещать содержимое к заданной позиции или элементу, поддерживая эффекты инерции и кастомной анимации.

Сигнатура метода выглядит следующим образом:

scroll.scrollTo(target, options);

  • target – целевая позиция прокрутки. Может быть:

    • числом (number) — абсолютное смещение в пикселях от начала прокрутки;
    • строкой (string) — CSS-селектор элемента, к которому нужно прокрутиться;
    • элементом DOM (HTMLElement) — конкретный узел документа;

  • options – объект с настройками анимации и поведения.

Параметры объекта options

offset

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

Пример:

scroll.scrollTo('#section2', { offset: -50 });
  • Значение -50 смещает позицию на 50 пикселей вверх, позволяя учитывать фиксированные элементы или отступы.

duration

Определяет длительность анимации прокрутки в миллисекундах.

Пример:

scroll.scrollTo(500, { duration: 1000 });
  • Прокрутка до позиции 500px будет длиться 1 секунду.
  • Если значение не указано, используется стандартная скорость, заданная библиотекой.

easing

Задает кривую анимации для прокрутки.

Поддерживаемые типы кривых:

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

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

scroll.scrollTo('#footer', { duration: 800, easing: 'easeInOutCubic' });

callback

Функция, вызываемая после завершения анимации прокрутки.

Пример:

scroll.scrollTo('.gallery', {
  duration: 1200,
  callback: () => {
    console.log('Прокрутка завершена');
  }
});
  • Позволяет запускать дополнительные действия, например, запуск анимаций элементов на экране.

disableLerp

Управляет использованием интерполяции (lerp) для плавной прокрутки.

  • true — отключает плавность, прокрутка происходит мгновенно к целевой позиции;
  • false — стандартная инерционная прокрутка, обеспечивающая эффект плавного скролла.

Пример:

scroll.scrollTo(0, { disableLerp: true });

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

Особенности работы с элементами и селекторами

  • Если target задан как CSS-селектор или DOM-элемент, библиотека автоматически вычисляет текущую позицию элемента на странице с учётом всех смещений и текущей прокрутки.
  • Важно учитывать фиксированные элементы, такие как шапка или навигация, с помощью параметра offset.
  • При прокрутке к элементу, находящемуся за пределами контейнера с overflow, Locomotive Scroll корректно рассчитает позицию в пределах видимой области.

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

  1. Прокрутка к элементу с кастомным смещением и кривой:
scroll.scrollTo('#contact', {
  offset: -100,
  duration: 1500,
  easing: 'easeOutQuad',
  callback: () => console.log('Достигнут блок контактов')
});
  1. Мгновенная прокрутка в начало страницы:
scroll.scrollTo(0, { disableLerp: true });
  1. Плавная прокрутка к следующему блоку с колбэком:
const nextSection = document.querySelector('.section-next');
scroll.scrollTo(nextSection, {
  duration: 1200,
  easing: 'easeInOutCubic',
  callback: () => {
    nextSection.classList.add('active');
  }
});

Рекомендации по использованию

  • Для удобного управления положением элементов на странице всегда использовать offset, особенно если есть фиксированные шапки или панели.
  • Оптимальная длительность duration обычно находится в диапазоне 600–1200 мс для плавного визуального эффекта.
  • Если требуется мгновенная навигация без плавности (например, при изменении состояния интерфейса), использовать disableLerp.
  • Комбинация callback и easing позволяет создавать сложные последовательные анимации интерфейса, синхронизированные с прокруткой.

Метод scrollTo предоставляет полный контроль над анимацией прокрутки и является ключевым инструментом для создания плавных, интерактивных интерфейсов на базе Locomotive Scroll.

Оглавление