Методы навигации

Библиотека fullPage.js предоставляет широкий спектр методов для управления навигацией между секциями и слайдами веб-страницы. Эти методы позволяют программно переходить к определённым элементам, управлять прокруткой и создавать сложные интерактивные интерфейсы с эффектами «одной страницы».

Переход к конкретной секции

Для перехода к нужной секции используется метод:

fullpage_api.moveTo(sectionAnchorOrIndex, slideIndex);
  • sectionAnchorOrIndex – номер секции (целое число, начиная с 1) или якорь секции (строка, установленная через data-anchor).
  • slideIndex – необязательный параметр, номер слайда внутри секции (начиная с 0). Если слайдов нет, можно опустить.

Примеры:

// Перейти к третьей секции
fullpage_api.moveTo(3);

// Перейти к секции с якорем 'contact'
fullpage_api.moveTo('contact');

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

Метод поддерживает плавную анимацию, которая управляется настройками scrollingSpeed и easing.

Переход к следующей или предыдущей секции

fullPage.js предоставляет методы для простого навигационного движения вверх и вниз:

fullpage_api.moveSectionDown();
fullpage_api.moveSectionUp();
  • moveSectionDown() — перемещает к следующей секции.
  • moveSectionUp() — перемещает к предыдущей секции.

Эти методы удобны при реализации пользовательских кнопок навигации:

document.getElementById('nextBtn').addEventListener('click', () => {
    fullpage_api.moveSectionDown();
});

Переход к слайду внутри секции

Для секций с горизонтальной каруселью слайдов применяются методы:

fullpage_api.moveSlideRight();
fullpage_api.moveSlideLeft();
fullpage_api.moveToSlide(slideIndex);
  • moveSlideRight() — переход к следующему слайду.
  • moveSlideLeft() — переход к предыдущему слайду.
  • moveToSlide(slideIndex) — переход к слайду с указанным индексом (от 0).

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

// Переход к третьему слайду в текущей секции
fullpage_api.moveToSlide(2);

Если текущая секция не содержит слайдов, методы не вызывают ошибку, но перехода не происходит.

Автоматическая навигация по якорям

Методы fullPage.js поддерживают переход к секциям и слайдам через URL-анкоры. При загрузке страницы с #anchor происходит автоматический переход к соответствующей секции. Для ручного изменения URL используется метод:

fullpage_api.setAllowScrolling(true);  // Включение скроллинга
fullpage_api.silentMoveTo(sectionAnchorOrIndex, slideIndex); // Переход без анимации и вызова событий
  • silentMoveTo() выполняет переход без активации коллбеков (onLeave, afterLoad) и без анимации, что полезно для программной навигации без визуальных эффектов.

Управление прокруткой

Методы навигации тесно связаны с управлением скроллингом. Для отключения или включения вертикальной прокрутки можно использовать:

fullpage_api.setAllowScrolling(true | false, 'up, down, left, right');
  • Первый параметр включает или блокирует прокрутку.
  • Второй параметр (необязательный) позволяет указывать направления ('up', 'down', 'left', 'right') для выборочной блокировки.

Пример:

// Отключаем вертикальную прокрутку, но оставляем горизонтальную
fullpage_api.setAllowScrolling(false, 'up, down');

Навигация через события

Для динамической навигации важно использовать методы внутри обработчиков событий:

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

Пример условного перехода:

onLeave: function(origin, destination, direction){
    if(destination.index === 2){
        fullpage_api.moveSectionDown();
    }
}

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

Итоговая структура методов навигации

Метод Описание
moveTo(section, slide) Переход к секции и слайду по индексу или якорю
moveSectionUp() Переход к предыдущей секции
moveSectionDown() Переход к следующей секции
moveSlideLeft() Переход к предыдущему слайду
moveSlideRight() Переход к следующему слайду
moveToSlide(slideIndex) Переход к слайду по индексу
silentMoveTo(section, slide) Переход без анимации и вызова событий
setAllowScrolling(true | false) Включение или блокировка прокрутки

Эти методы формируют основу интерактивной навигации в fullPage.js, позволяя строить страницы с «одной прокруткой» и сложной структурой секций и слайдов.

Оглавление