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

FullPage.js предоставляет возможность создавать одностраничные сайты с вертикальной и горизонтальной прокруткой, при этом управление навигацией может быть интегрировано с URL через якоря. Это позволяет пользователю переходить к определённому разделу страницы напрямую, а также обеспечивает сохранение состояния страницы при обновлении браузера или обмене ссылками.

Настройка якорей

Для активации навигации через URL необходимо использовать параметр anchors при инициализации плагина. Этот параметр принимает массив строк, каждая из которых соответствует определённому разделу.

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'services', 'contact'],
    navigation: true,
    navigationPosition: 'right',
    scrollOverflow: true
});

anchors – массив строк, задающих уникальные идентификаторы для каждого слайда. Эти значения будут использоваться в URL после символа #.
navigation – отображает навигационные точки для быстрого перехода между разделами.
scrollOverflow – включает прокрутку внутри слайдов, если контент превышает размер окна.

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

https://example.com/#about
https://example.com/#services

Динамическая смена URL

FullPage.js автоматически обновляет URL при прокрутке. Если пользователь прокручивает страницу вниз, адрес браузера изменяется в соответствии с anchors. Это позволяет создавать прямые ссылки на любой раздел и поддерживать корректное состояние при обновлении страницы.

afterLoad: function(origin, destination, direction){
    console.log("Перешли на секцию: " + destination.anchor);
}

afterLoad – коллбек, который вызывается после загрузки каждой секции.
destination.anchor – текущий якорь секции, что позволяет синхронизировать сторонние элементы интерфейса с навигацией.

Переход к секции через ссылку

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

<a href="#services">Наши услуги</a>
<a href="#contact">Контакты</a>

При клике браузер плавно прокручивает страницу до указанного якоря. Это особенно удобно для одностраничных лендингов с большим количеством секций.

Управление URL программно

FullPage.js предоставляет методы для программного перехода между секциями и синхронизации с URL.

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

// Переход к конкретной горизонтальной секции (если используется горизонтальный слайдер)
fullpage_api.moveTo('services', 2);

fullpage_api.moveTo(anchor, index) – первый аргумент anchor может быть строкой из массива anchors, второй index указывает на горизонтальный слайд внутри секции (нумерация с 1).

Работа с обратной навигацией

При использовании якорей встроенная навигация браузера поддерживает кнопки «Назад» и «Вперёд». FullPage.js автоматически отслеживает изменения URL и перемещает пользователя на соответствующую секцию.

onLeave: function(origin, destination, direction){
    console.log("Происходит уход с секции: " + origin.anchor);
}

onLeave – вызывается при выходе с секции.
origin.anchor – якорь секции, с которой пользователь уходит.

Такой подход позволяет синхронизировать URL и состояние страницы без необходимости вручную управлять историей браузера.

Интеграция с внешними навигационными элементами

FullPage.js позволяет связать внешние элементы управления с навигацией через якоря. Например, меню сайта может менять активный элемент при прокрутке и одновременно обновлять URL.

document.querySelectorAll('nav a').forEach(link => {
    link.addEventListener('click', function(e){
        e.preventDefault();
        const anchor = this.getAttribute('href').replace('#', '');
        fullpage_api.moveTo(anchor);
    });
});

Событие click предотвращает стандартное поведение браузера.
Метод fullpage_api.moveTo(anchor) инициирует плавную прокрутку к нужной секции.
URL автоматически синхронизируется с выбранным якорем.