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

Библиотека fullPage.js реализует постраничную прокрутку (full-screen scrolling), при которой каждая секция воспринимается как отдельный экран. Для корректной навигации и интеграции с браузером важна синхронизация состояния интерфейса с историей браузера: адресной строкой, кнопками «Назад» и «Вперёд», а также возможностью прямого перехода по URL.

В основе лежит использование якорей (anchors) и механизма History API или hash-навигации.

Якоря (anchors) как основа истории

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

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage']
});

При переходе между секциями URL автоматически изменяется:

example.com/#firstPage
example.com/#secondPage

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

  • Якоря должны быть уникальными
  • Порядок в массиве соответствует порядку секций в DOM
  • Используются для прямой навигации и восстановления состояния

Параметр lockAnchors

Позволяет отключить изменение URL при прокрутке:

lockAnchors: true

Поведение:

  • URL остаётся неизменным
  • История браузера не пополняется
  • Кнопки «Назад» и «Вперёд» не влияют на прокрутку

Применение:

  • Одностраничные интерфейсы без необходимости делиться ссылками
  • Встраиваемые виджеты

Параметр recordHistory

Контролирует запись переходов в историю браузера:

recordHistory: false

Режимы работы:

true (по умолчанию):

  • Каждое перемещение добавляет запись в историю
  • Кнопка «Назад» возвращает к предыдущей секции

false:

  • История не пополняется
  • URL обновляется, но без записи
  • Кнопки браузера не влияют на навигацию

Отличие от lockAnchors:

  • recordHistory: false сохраняет изменение URL
  • lockAnchors: true полностью отключает работу с якорями

Параметр animateAnchor

Определяет, будет ли анимация при загрузке страницы с якорем:

animateAnchor: true

Поведение:

true:

  • Плавная прокрутка к нужной секции

false:

  • Мгновенный переход без анимации

Пример:

example.com/#secondPage

При загрузке:

  • либо плавный скролл
  • либо мгновенное отображение

Параметр anchors и вложенные слайды

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

anchors: ['section1', 'section2']

И для слайдов:

<div class="section">
    <div class="slide" data-anchor="slide1"></div>
    <div class="slide" data-anchor="slide2"></div>
</div>

URL формируется так:

example.com/#section1/slide2

Метод moveTo и синхронизация истории

Программный переход:

fullpage_api.moveTo('secondPage');

Или к слайду:

fullpage_api.moveTo('section1', 'slide2');

Влияние на историю:

  • При recordHistory: true добавляется запись
  • URL обновляется автоматически
  • Состояние синхронизируется с браузером

Работа с кнопками браузера

fullPage.js автоматически обрабатывает события popstate или изменения hash:

При нажатии «Назад»:

  • происходит переход к предыдущему якорю
  • выполняется анимация прокрутки
  • вызываются соответствующие callbacks

При нажатии «Вперёд»:

  • переход к следующему состоянию

Параметр scrollBar и история

scrollBar: true

Влияние:

  • используется стандартный скролл браузера
  • history работает как в обычной странице
  • якоря продолжают функционировать

Callback afterLoad и работа с историей

Позволяет отслеживать изменения:

afterLoad: function(origin, destination, direction){
    console.log(destination.anchor);
}

Возможности:

  • синхронизация с аналитикой
  • обновление состояния приложения
  • управление дополнительной логикой URL

Callback onLeave и контроль переходов

onLeave: function(origin, destination, direction){
    return true;
}

Использование:

  • блокировка переходов
  • проверка условий перед сменой секции

Глубокая интеграция с History API

В современных версиях fullPage.js используется:

  • history.pushState
  • history.replaceState

Это обеспечивает:

  • отсутствие перезагрузки страницы
  • плавную навигацию
  • поддержку SPA-подхода

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

В некоторых случаях требуется переопределение поведения:

window.addEventListener('popstate', function(event) {
    // кастомная логика
});

Сценарии:

  • интеграция с React/Vue роутерами
  • синхронизация с глобальным состоянием
  • сложные интерфейсы

SEO и история

Использование якорей имеет ограничения:

Проблемы:

  • поисковые системы хуже индексируют hash-URL
  • отсутствует серверная маршрутизация

Решения:

  • prerendering
  • SSR (server-side rendering)
  • fallback страницы

Частые ошибки

Несовпадение anchors и секций

anchors: ['one', 'two']

При наличии трёх секций — некорректная работа истории.

Повторяющиеся якоря

anchors: ['page', 'page']

Приводит к конфликтам в URL и навигации.

Использование lockAnchors вместе с recordHistory

Непредсказуемое поведение:

  • URL не обновляется
  • история не работает

Практические сценарии

Лэндинг с полноценной навигацией

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

Поведение:

  • каждая секция — отдельный URL
  • поддержка кнопок браузера
  • возможность делиться ссылками

Минималистичный интерфейс без истории

new fullpage('#fullpage', {
    lockAnchors: true,
    recordHistory: false
});

Поведение:

  • URL не меняется
  • история не используется

Гибридный режим

new fullpage('#fullpage', {
    anchors: ['page1', 'page2'],
    recordHistory: false,
    animateAnchor: false
});

Поведение:

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

Взаимодействие с внешними ссылками

Переход по ссылке:

<a href="#secondPage">Перейти</a>

fullPage.js перехватывает событие и выполняет:

  • прокрутку к нужной секции
  • обновление состояния

Динамическое изменение якорей

Возможна пересборка:

fullpage_api.destroy('all');

И повторная инициализация с новыми anchors.

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

menu: '#menu'

HTML:

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage">First</a></li>
</ul>

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

  • активный пункт синхронизируется с URL
  • история браузера отражает текущее состояние

Итоговые принципы

  • URL отражает текущую секцию через anchors
  • History API управляет навигацией без перезагрузки
  • Параметры recordHistory и lockAnchors задают стратегию работы
  • Кнопки браузера полностью интегрированы в систему прокрутки
  • Гибкость позволяет адаптировать поведение под любые интерфейсы
Оглавление