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

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

Инициализация навигации

Для активации навигации необходимо при инициализации fullPage.js указать соответствующие параметры:

new fullpage('#fullpage', {
    navigation: true, // отображение индикаторов навигации
    navigationPosition: 'right', // положение навигационных точек
    navigationTooltips: ['Главная', 'О нас', 'Услуги', 'Контакты'], // подсказки при наведении
    showActiveTooltip: true // показывать подсказку активной секции
});

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

  • navigation — включает/отключает визуальные точки навигации.
  • navigationPosition — задаёт расположение точек: 'right' или 'left'.
  • navigationTooltips — массив строк, каждая соответствует секции и отображается при наведении.
  • showActiveTooltip — позволяет подсветить подсказку для текущей активной секции.

Встроенные методы навигации

fullPage.js предоставляет набор методов для программного управления навигацией:

  • fullpage_api.moveSectionUp() — перемещение к предыдущей секции.
  • fullpage_api.moveSectionDown() — переход к следующей секции.
  • fullpage_api.moveTo(sectionNumber [, slideNumber]) — переход к конкретной секции (и слайду при наличии слайдов).
  • fullpage_api.silentMoveTo(sectionNumber [, slideNumber]) — мгновенный переход без анимации.

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

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

document.querySelector('#goToServices').addEventListener('click', () => {
    fullpage_api.moveTo(3); // переходим к третьей секции
});

Навигация с помощью клавиатуры и колесика мыши

По умолчанию fullPage.js поддерживает:

  • Стрелки вверх/вниз для перемещения между секциями.
  • Прокрутку колесиком мыши для перехода к следующей или предыдущей секции.

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

new fullpage('#fullpage', {
    keyboardScrolling: true, // включение управления клавиатурой
    animateAnchor: true // плавное перемещение при использовании якорей
});

Чтобы временно отключить клавиатурное управление:

fullpage_api.setKeyboardScrolling(false);

Навигация через якоря

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

<div class="section" data-anchor="home">Главная</div>
<div class="section" data-anchor="about">О нас</div>
<div class="section" data-anchor="services">Услуги</div>

Инициализация с поддержкой якорей:

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'services'],
    navigation: true,
    navigationTooltips: ['Главная', 'О нас', 'Услуги']
});

Теперь переход к секции возможен через URL: example.com/#services. Для программного перехода используется:

fullpage_api.moveTo('about');

Кастомизация навигационных элементов

Навигационные точки можно полностью кастомизировать с помощью CSS:

.fp-right .fp-nav ul li a span {
    background: #3498db; /* цвет точек */
    width: 12px;
    height: 12px;
}

.fp-right .fp-nav ul li a.active span {
    background: #e74c3c; /* цвет активной точки */
}

Также возможна замена стандартных точек на иконки:

.fp-right .fp-nav ul li a span:after {
    content: "★"; /* пример иконки вместо точки */
    font-size: 14px;
    display: block;
    color: #fff;
}

События, связанные с навигацией

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

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

Пример отслеживания переходов:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log(`Перешли на секцию: ${destination.index + 1}`);
    },
    onLeave: function(origin, destination, direction){
        console.log(`Покидаем секцию: ${origin.index + 1}`);
    }
});

Динамическое обновление навигации

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

fullpage_api.reBuild(); // пересчитывает высоту и обновляет навигацию

Метод reBuild() учитывает новые секции, а также изменённые размеры или порядок элементов, что делает навигацию всегда актуальной.

Программная интеграция с элементами интерфейса

Навигацию можно связывать с любыми DOM-элементами:

const navButtons = document.querySelectorAll('.custom-nav-btn');
navButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        const targetSection = parseInt(btn.dataset.section);
        fullpage_api.moveTo(targetSection);
    });
});

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

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

Оглавление