Программное управление навигацией

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

Управление осуществляется через методы, доступные в экземпляре fullPage, либо через глобальный объект fullpage_api (в версиях 3+).

Переход к секциям

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

fullpage_api.moveTo(section, slide);

Параметры:

  • section — индекс (начиная с 1) или якорь секции
  • slide — необязательный параметр, индекс или якорь слайда

Примеры:

fullpage_api.moveTo(2);
fullpage_api.moveTo('about');
fullpage_api.moveTo(3, 2);

Особенности:

  • При использовании якорей необходимо, чтобы они были заданы в конфигурации (anchors)
  • Если указан слайд, сначала выполняется переход к секции, затем к слайду

Последовательная навигация

Для перемещения по порядку используются методы:

fullpage_api.moveSectionDown();
fullpage_api.moveSectionUp();

Аналогично для горизонтальных слайдов:

fullpage_api.moveSlideRight();
fullpage_api.moveSlideLeft();

Применение:

  • Кастомные кнопки «вперёд/назад»
  • Автоматическая прокрутка
  • Управление с клавиатуры или жестов

Управление состоянием прокрутки

Блокировка прокрутки

fullpage_api.setAllowScrolling(false);

Назначение:

  • Временное отключение прокрутки пользователем
  • Используется при показе модальных окон или выполнении анимаций

Включение обратно:

fullpage_api.setAllowScrolling(true);

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

fullpage_api.setAllowScrolling(false, 'down, right');

Доступные направления:

  • up
  • down
  • left
  • right

Позволяет ограничивать движение только в определённые стороны.

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

fullpage_api.setKeyboardScrolling(false);

Отключает управление с клавиатуры (стрелки, PageUp/PageDown).

Управление колесом мыши и тач-событиями

fullpage_api.setAutoScrolling(false);

Режимы:

  • true — классическое поведение fullPage (секции фиксированы)
  • false — обычная прокрутка страницы

Дополнительно:

fullpage_api.setFitToSection(false);

Отключает автоматическое «прилипание» к секциям.

Динамическая навигация по событиям

Часто управление выполняется в ответ на действия пользователя или события приложения.

Пример: переход по кнопке

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

Пример: автоматический переход через время

setTimeout(() => {
    fullpage_api.moveSectionDown();
}, 3000);

Пример: реакция на внешний API

function onDataLoaded() {
    fullpage_api.moveTo('dashboard');
}

Получение текущего состояния

Метод:

fullpage_api.getActiveSection();

Возвращает объект с данными:

{
    index: 0,
    anchor: "home",
    item: HTMLElement
}

Аналогично для слайда:

fullpage_api.getActiveSlide();

Условная навигация

Возможна реализация логики переходов:

const current = fullpage_api.getActiveSection().index;

if (current === 0) {
    fullpage_api.moveTo(3);
}

Работа с якорями

Якоря задаются в конфигурации:

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'contact']
});

После этого:

fullpage_api.moveTo('about');

Преимущества:

  • Читаемые URL
  • Поддержка навигации через адресную строку
  • Интеграция с роутингом

Синхронизация с URL

fullPage.js автоматически обновляет URL при переходах, если включена опция:

recordHistory: true

Программный переход также изменяет URL:

fullpage_api.moveTo('contact');

Это позволяет:

  • Использовать кнопки браузера «назад/вперёд»
  • Делать прямые ссылки на секции

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

fullpage_api.setRecordHistory(false);

Отключает запись переходов в историю браузера.

Управление анимацией переходов

Время анимации

fullpage_api.setScrollingSpeed(1000);

Задает длительность анимации в миллисекундах.

Мгновенный переход

fullpage_api.setScrollingSpeed(0);
fullpage_api.moveTo(2);

Управление через пользовательские события

fullPage.js предоставляет callbacks, которые можно использовать для управления навигацией:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction) {
        if (destination.index === 2) {
            fullpage_api.moveSlideRight();
        }
    }
});

Комплексные сценарии

Пошаговый onboarding

function nextStep(step) {
    fullpage_api.moveTo(step);
}

Автопрокрутка презентации

let interval = setInterval(() => {
    fullpage_api.moveSectionDown();
}, 5000);

Остановка:

clearInterval(interval);

Синхронизация с меню

document.querySelectorAll('.menu-item').forEach((item, index) => {
    item.addEventListener('click', () => {
        fullpage_api.moveTo(index + 1);
    });
});

Управление вложенными слайдами

Если секция содержит слайды:

fullpage_api.moveTo('portfolio', 'project2');

Или:

fullpage_api.moveSlideRight();

Ограничение переходов

Можно запретить переход к определённым секциям:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction) {
        if (destination.index === 3) {
            return false;
        }
    }
});

Динамическое включение и отключение секций

fullpage_api.setAllowScrolling(false);

В комбинации с условиями позволяет реализовать:

  • проверки форм
  • подтверждения действий
  • блокировку до загрузки данных

Управление при изменении контента

После динамических изменений DOM:

fullpage_api.reBuild();

Это необходимо, если:

  • добавлены новые секции
  • изменена высота элементов

Использование с фреймворками

В React/Vue управление обычно осуществляется через ref или глобальный API:

window.fullpage_api.moveTo(2);

Важно учитывать:

  • асинхронность рендеринга
  • необходимость вызывать методы после монтирования

Типичные ошибки

1. Вызов API до инициализации

fullpage_api.moveTo(2); // ошибка, если fullPage ещё не создан

Решение — вызывать после инициализации.

2. Неправильные индексы

Индексация начинается с 1, а не с 0.

3. Отсутствие якорей

fullpage_api.moveTo('about'); // не сработает без anchors

Практика архитектуры управления

  • Централизация навигации в одном модуле
  • Использование событийной модели
  • Изоляция логики переходов от UI
  • Синхронизация состояния приложения и текущей секции

Связка с анимациями

Программная навигация часто используется вместе с CSS или JS-анимациями:

fullpage_api.moveTo(2);

setTimeout(() => {
    document.querySelector('.element').classList.add('animate');
}, 700);

Расширенные паттерны

State-driven navigation:

function navigate(state) {
    switch(state) {
        case 'home':
            fullpage_api.moveTo(1);
            break;
        case 'profile':
            fullpage_api.moveTo(2);
            break;
    }
}

Router-like поведение:

window.addEventListener('hashchange', () => {
    const hash = location.hash.replace('#', '');
    fullpage_api.moveTo(hash);
});

Производительность и UX

  • Частые программные переходы могут утомлять пользователя
  • Рекомендуется контролировать скорость и частоту
  • Важно учитывать доступность (например, отключение автопрокрутки)

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

Оглавление