Метод moveTo

Метод moveTo является одним из ключевых инструментов библиотеки fullPage.js для программного управления навигацией по секциям и слайдам страницы. Он позволяет плавно перемещаться к конкретной секции или слайду без необходимости взаимодействия пользователя через скролл мышью или клавиатуру. Этот метод особенно полезен при создании интерактивных интерфейсов, презентаций или лендингов с динамическими переходами.

Синтаксис

fullpage_api.moveTo(section, slide);
  • section (обязательный) — номер или идентификатор секции, к которой необходимо перейти. Нумерация начинается с 1.
  • slide (необязательный) — номер слайда внутри секции, если требуется перейти не только к секции, но и к конкретному слайду. Нумерация слайдов также начинается с 1.

Основные возможности

  1. Переход к секции по номеру
fullpage_api.moveTo(3);

Переходит к третьей секции на странице. Переход осуществляется с плавной анимацией, заданной настройками fullPage.js (scrollingSpeed, easing).

  1. Переход к секции по идентификатору

Если секции заданы через атрибут data-anchor, можно использовать его:

fullpage_api.moveTo('contact');

В этом случае библиотека найдет секцию с data-anchor="contact" и плавно к ней переместится.

  1. Переход к слайду внутри секции
fullpage_api.moveTo(2, 3);

Переходит во вторую секцию и одновременно на третий слайд внутри этой секции. Если слайд не указан, переход произойдет только к секции.

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

  • Анимация и скорость: Переходы управляются настройками scrollingSpeed и easing. Можно динамически изменять скорость, вызывая fullpage_api.setScrollingSpeed(value).
  • Закольцованные секции: Если включен loopTop или loopBottom, метод учитывает циклическую навигацию. Например, переход к секции 1 с текущей секции последней корректно выполнится даже при включенном цикле.
  • Поддержка ленточных слайдов: Метод автоматически корректно перемещается между слайдами, поддерживая горизонтальные слайды, заданные внутри секции.
  • Совместимость с URL: Если используется anchors, URL изменяется в соответствии с целевой секцией, что позволяет сохранять историю навигации и поддерживать прямые ссылки.

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

  1. Переход по кнопке к конкретной секции
document.querySelector('#btnAbout').addEventListener('click', function() {
    fullpage_api.moveTo(2);
});
  1. Переход по слайду внутри секции
document.querySelector('#btnSlide').addEventListener('click', function() {
    fullpage_api.moveTo('features', 2);
});
  1. Динамическая навигация с выбором секции
function goToSection(sectionNumber) {
    fullpage_api.moveTo(sectionNumber);
}

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

  • Если указан несуществующий номер секции или слайда, метод не вызовет ошибок, но перемещение не произойдет.
  • Метод можно вызывать в любом месте после инициализации fullPage.js, включая колбэки afterRender или afterLoad.
  • Для плавной интеграции с другими анимациями рекомендуется использовать колбэки, такие как afterLoad, чтобы синхронизировать действия после завершения перехода.
  • При использовании слайдов важно учитывать, что нумерация начинается с 1, а не с 0, иначе переход не будет корректным.

Советы по применению

  • Для создания навигационных меню с плавной прокруткой удобно привязывать метод moveTo к событиям click на ссылках.
  • Комбинация с колбэками onLeave и afterLoad позволяет запускать анимации или загружать контент при переходе к секции.
  • Использование moveTo с anchors делает сайт более SEO-дружественным и позволяет пользователям делиться ссылками на конкретные разделы.

Метод moveTo обеспечивает полный контроль над навигацией по секциям и слайдам, что делает его незаменимым инструментом при разработке сложных интерфейсов с библиотекой fullPage.js. Он универсален как для статических страниц, так и для динамического управления переходами через пользовательские события или программный код.

Оглавление