scrollTo()

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

Синтаксис метода

scroll.scrollTo(target, options);

Параметры:

  1. target – обязательный параметр, определяющий конечное положение прокрутки. Может принимать несколько типов значений:

    • CSS-селектор ('#section1', '.block') – библиотека автоматически находит первый элемент, соответствующий селектору.
    • DOM-элемент – любой элемент, который присутствует на странице.
    • Число – вертикальная координата в пикселях относительно начала скролла (не страницы).
    • Строка 'top' или 'bottom' – прокрутка к началу или концу документа.

  2. options – объект с настройками анимации прокрутки:

    • offset (число, по умолчанию 0) – смещение в пикселях от указанной цели. Полезно для компенсации фиксированных шапок или отступов.
    • duration (число, миллисекунды) – время анимации прокрутки. Если не указано, применяется стандартная скорость библиотеки.
    • easing (функция) – функция сглаживания анимации. Поддерживаются стандартные кривые CSS или пользовательские функции.
    • disableLerp (boolean) – отключение интерполяции (LERP), когда нужно мгновенное перемещение без плавности.

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

Прокрутка к элементу по селектору

scroll.scrollTo('#about', {
  offset: -50,
  duration: 1000,
  easing: [0.25, 0.0, 0.35, 1.0]
});

В этом примере страница плавно прокручивается к элементу с id="about", с компенсацией фиксированной шапки в 50px. Время анимации составляет 1 секунду, а кривая easing обеспечивает плавный старт и замедление в конце.

Прокрутка к DOM-элементу

const section = document.querySelector('.services');
scroll.scrollTo(section, { duration: 800 });

Метод принимает прямой DOM-элемент. Здесь используется стандартная скорость Locomotive Scroll с временем анимации 800 мс.

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

scroll.scrollTo(500, { offset: 0, duration: 500 });

Прокрутка происходит к позиции 500px относительно начала скролла. Это удобно для динамически вычисляемых координат.

Прокрутка к началу или концу страницы

scroll.scrollTo('top', { duration: 600 });
scroll.scrollTo('bottom', { duration: 1200 });

Скорость прокрутки может быть индивидуально задана для каждой операции.

Особенности работы

  • Интеграция с виртуальным скроллом – Locomotive Scroll использует виртуальный контейнер, поэтому прямые изменения window.scroll не синхронизируются с библиотекой. scrollTo() полностью управляет виртуальной позицией.
  • Совместимость с offset и easing – метод поддерживает тонкую настройку движения, позволяя создавать сложные эффекты, включая параллакс и динамическое смещение.
  • Мгновенная прокрутка – использование {duration: 0} или {disableLerp: true} позволяет мгновенно перемещаться к цели без плавной анимации.
  • Поддержка горизонтального скролла – в случае горизонтальной конфигурации Locomotive Scroll, метод также корректно работает по оси X.

Практические рекомендации

  1. Использовать offset для фиксированных элементов – при наличии фиксированной шапки или панели навигации, всегда компенсировать её высоту.
  2. Управление длительностью анимации – для крупных страниц длительность стоит увеличивать, чтобы прокрутка оставалась визуально приятной.
  3. Комбинировать с событиями – метод можно вызывать внутри scroll.on('call', callback) для динамических интерактивных скролл-сценариев.
  4. Обработка отсутствующих элементов – перед вызовом scrollTo() рекомендуется проверять существование DOM-элемента, иначе вызов приведёт к ошибке.

Взаимодействие с другими методами

Метод scrollTo() часто используется вместе с:

  • scroll.on('scroll', callback) – для синхронизации действий с текущей позицией.
  • scroll.update() – после динамического изменения DOM, чтобы обновить позиции скролла перед прокруткой.
  • scroll.start() / scroll.stop() – для временной блокировки скролла при анимациях или модальных окнах.

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

Оглавление