Метод moveSectionUp

Метод moveSectionUp библиотеки fullPage.js позволяет программно перемещать пользователя на предыдущую секцию страницы. В отличие от ручного скролла, вызов этого метода инициирует анимацию перехода и учитывает все настройки библиотеки, включая scrollingSpeed, easing, autoScrolling и fitToSection.

Синтаксис

fullpage_api.moveSectionUp();
  • Без параметров — метод не требует аргументов. Он всегда инициирует переход на предыдущую секцию относительно текущей.

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

  1. Проверка границ Если текущая секция является первой (index = 0), метод не выполнит переход, но при этом событие onLeave не вызовется. Это предотвращает ошибочные переходы за пределы документа.

  2. Анимация перехода Скорость и стиль анимации зависят от конфигурации fullPage.js:

    • scrollingSpeed — скорость анимации в миллисекундах.
    • easing — функция смягчения анимации. Метод учитывает эти параметры и обеспечивает плавный визуальный эффект перемещения.

  3. События Метод запускает стандартные колбэки:

    • onLeave — при выходе из текущей секции.
    • afterLoad — после загрузки предыдущей секции. Параметры колбэков включают origin, destination, direction, что позволяет логировать или выполнять дополнительные действия при переходах.

  4. Интеграция с другими методами moveSectionUp совместим с:

    • moveSectionDown() — переход к следующей секции.
    • moveTo(section, slide) — переход к произвольной секции.
    • silentMoveTo(section) — мгновенный переход без анимации.

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

Пример вызова метода при клике на кнопку:

document.querySelector('#upButton').addEventListener('click', function() {
    fullpage_api.moveSectionUp();
});

Вариант с проверкой текущей секции:

if(fullpage_api.getActiveSection().index > 0) {
    fullpage_api.moveSectionUp();
}

Такой подход полезен, если необходимо ограничить движение на первой секции и избежать лишних вызовов метода.

Особенности в мобильных устройствах

На мобильных устройствах с включённым autoScrolling метод корректно работает с тач-событиями и жестами, имитируя стандартный свайп вверх. Если autoScrolling: false, метод всё равно перемещает страницу к предыдущей секции, используя CSS-перемещения или стандартный scrollTop.

Взаимодействие с горизонтальными слайдами

Если текущая секция содержит слайды (slides), метод moveSectionUp не изменяет текущий слайд, а лишь перемещает пользователя на предыдущую вертикальную секцию. Для работы со слайдами используются методы:

  • moveSlideLeft()
  • moveSlideRight()

Ограничения и советы по использованию

  • Метод не вызывает переход, если уже на первой секции. Для циклического поведения необходимо включить loopTop: true в конфигурации fullPage.js.
  • Совмещать moveSectionUp с пользовательскими скриптами навигации следует аккуратно, чтобы избежать конфликта анимаций.
  • Для динамически созданных секций метод работает корректно, но после добавления новых элементов рекомендуется вызвать fullpage_api.reBuild().

Интерактивная настройка

Метод moveSectionUp удобно использовать в сочетании с динамическими событиями:

window.addEventListener('keydown', function(e) {
    if(e.key === 'ArrowUp') {
        fullpage_api.moveSectionUp();
    }
});

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

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

Оглавление