Метод silentMoveTo

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

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

fullpage_api.silentMoveTo(sectionAnchorOrIndex [, slideAnchorOrIndex])
  • sectionAnchorOrIndex — идентификатор (anchor) или индекс целевой секции. Индексы начинаются с 1.
  • slideAnchorOrIndex (необязательный) — идентификатор или индекс целевого слайда внутри секции. Индексы также начинаются с 1.

Метод можно вызывать из любого места после инициализации fullPage.js через объект fullpage_api.

Основные свойства и особенности

  1. Мгновенное перемещение без анимации В отличие от метода moveTo, silentMoveTo не выполняет плавной прокрутки. Это особенно полезно для:

    • мгновенного обновления состояния страницы при загрузке;
    • синхронизации навигации с внешними элементами управления;
    • создания скриптовых переключений между секциями без визуального эффекта.

  2. Работа с секциями и слайдами Метод поддерживает как перемещение между секциями, так и между слайдами:

    • Если передан только параметр sectionAnchorOrIndex, происходит переход к соответствующей секции;
    • Если указан slideAnchorOrIndex, происходит переход к слайду внутри целевой секции.

  3. Поддержка anchor Можно передавать не только числовой индекс секции или слайда, но и строковый anchor, если он был задан при инициализации fullPage.js через опцию anchors.

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

Перемещение к третьей секции без анимации:

fullpage_api.silentMoveTo(3);

Перемещение к секции с anchor about:

fullpage_api.silentMoveTo('about');

Перемещение к слайду внутри секции:

// Переход к 2-й секции, 3-му слайду
fullpage_api.silentMoveTo(2, 3);

// Или используя anchor секции и слайда
fullpage_api.silentMoveTo('services', 'pricing');

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

  • Инициализация страницы с определенной секцией При загрузке страницы можно автоматически перемещать пользователя к заранее выбранной секции или слайду, используя данные из URL или cookie:
document.addEventListener('DOMContentLoaded', function() {
    const sectionFromURL = getSectionFromURL(); // возвращает индекс или anchor
    fullpage_api.silentMoveTo(sectionFromURL);
});
  • Скриптовое переключение контента Для реализации логики «пошаговых презентаций» или интерактивных элементов без визуальных переходов:
function goToNextStep(currentStep) {
    fullpage_api.silentMoveTo(currentStep + 1);
}
  • Синхронизация с внешними элементами управления Например, навигационные кнопки могут напрямую менять текущую секцию без плавного скролла:
document.querySelectorAll('.nav-button').forEach((btn, index) => {
    btn.addEventListener('click', () => {
        fullpage_api.silentMoveTo(index + 1);
    });
});

Отличия от метода moveTo

Параметр moveTo silentMoveTo
Анимация перехода Плавная (scrolling) Нет (мгновенно)
Использование слайдов Да Да
Реакция на события Генерирует события onLeave и afterLoad с анимацией Генерирует события, но без анимации

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

Советы по использованию

  • Всегда проверять наличие секции или слайда перед вызовом метода, чтобы избежать ошибок undefined.
  • Для работы с динамически создаваемыми секциями рекомендуется вызывать silentMoveTo после полной инициализации fullPage.js.
  • Использовать метод для синхронизации состояния интерфейса, а не для имитации плавной навигации — для этого лучше moveTo.

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

Оглавление