Метод moveSectionDown

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

Синтаксис

fullpage_api.moveSectionDown();
  • fullpage_api — глобальный объект, предоставляемый fullPage.js после инициализации.
  • Метод не принимает аргументы.
  • Возвращает undefined, но инициирует анимацию перехода к следующей секции.

Основное поведение

  • Если текущая секция не последняя, страница плавно прокрутится к следующей секции.

  • Если текущая секция последняя:

    • При активированном параметре loopBottom: true — произойдет переход на первую секцию.
    • Если loopBottom: false — переход не произойдет, метод просто завершит выполнение без ошибки.

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

new fullpage('#fullpage', {
    navigation: true,
    loopBottom: true,
    scrollingSpeed: 700
});

// Переход к следующей секции по клику кнопки
document.querySelector('#nextBtn').addEventListener('click', () => {
    fullpage_api.moveSectionDown();
});

В этом примере метод moveSectionDown привязан к кнопке с id="nextBtn". При каждом клике происходит анимация прокрутки к следующей секции со скоростью, указанной в параметре scrollingSpeed.

Особенности работы с динамическим контентом

Если секции добавляются динамически после инициализации fullPage.js, важно использовать метод reBuild(), чтобы обновить внутренние данные библиотеки:

fullpage_api.reBuild();
fullpage_api.moveSectionDown();

Без вызова reBuild fullPage.js может некорректно определить количество секций, и moveSectionDown может не сработать.

Совместное использование с другими методами

Метод moveSectionDown удобно комбинировать с другими методами API:

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

Пример навигации по кнопкам:

document.querySelector('#prevBtn').addEventListener('click', () => {
    fullpage_api.moveSectionUp();
});

document.querySelector('#firstSectionBtn').addEventListener('click', () => {
    fullpage_api.moveTo(1);
});

Влияние опций fullPage.js на метод

  • scrollingSpeed — определяет длительность анимации перехода.
  • autoScrolling — если false, метод все равно сработает, но поведение скролла может быть менее плавным, так как страница будет прокручиваться обычным способом.
  • loopBottom — влияет на поведение при достижении последней секции.

Ограничения и рекомендации

  • Не рекомендуется вызывать moveSectionDown часто в короткий промежуток времени, так как анимация может накладываться и возникнет визуальный баг.

  • Для контроля переходов в реальном времени лучше использовать события:

    • onLeave(origin, destination, direction) — срабатывает перед сменой секции.
    • afterLoad(origin, destination, direction) — срабатывает после завершения анимации.

Пример с событиями

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log('Переход из секции', origin.index, 'в секцию', destination.index);
    }
});

// Переход к следующей секции программно
fullpage_api.moveSectionDown();

Событие onLeave позволяет отслеживать текущую секцию, предотвращать переход или запускать дополнительные действия (анимации, загрузку данных) перед прокруткой.

Заключение по применению метода

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

Ключевые моменты:

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