Метод setRecordHistory

Метод setRecordHistory является важным инструментом управления историей навигации при использовании библиотеки fullPage.js. Он позволяет контролировать, будут ли изменения секций и слайдов отражаться в истории браузера, что напрямую влияет на работу кнопок «Назад» и «Вперед» в браузере, а также на формирование URL с хэшами для каждой секции.

Синтаксис

fullpage_api.setRecordHistory(boolean);

  • boolean – логическое значение:

    • true – изменения секций и слайдов будут добавляться в историю браузера.
    • false – изменения не будут отражаться в истории, URL не будет изменяться.

Основные особенности

  1. Управление историей браузера При значении true каждая секция и каждый слайд будут создавать отдельную запись в истории. Это особенно важно для веб-сайтов с длинными лендингами, где пользователю нужно иметь возможность вернуться к предыдущему экрану через кнопку «Назад».

  2. Влияние на URL Если история записывается, URL страницы обновляется автоматически, добавляя хэш текущей секции (#section1) и слайда (#slide2). Это позволяет легко делиться ссылкой на конкретную секцию или слайд.

  3. Оптимизация навигации Отключение записи истории (false) может быть полезно для одностраничных презентаций или интерфейсов, где кнопки браузера не должны прерывать анимацию или слайд-шоу. В таких случаях метод setRecordHistory(false) предотвращает излишнее увеличение количества записей в истории.

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

1. Включение истории для секций

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true
});

// Включение записи истории
fullpage_api.setRecordHistory(true);

При этом каждая секция добавляет новую запись в историю браузера. Если пользователь переходит на следующую секцию, URL изменится на #section2, а нажатие кнопки «Назад» вернёт пользователя к #section1.

2. Отключение записи истории

fullpage_api.setRecordHistory(false);

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

3. Динамическое переключение

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

// Пользователь начинает просмотр презентации
fullpage_api.setRecordHistory(false);

// После окончания презентации включаем историю для обычной навигации
fullpage_api.setRecordHistory(true);

Взаимодействие с другими методами fullPage.js

  • moveSectionDown / moveSectionUp / moveTo Все методы навигации учитывают текущее состояние записи истории. Если setRecordHistory(false), вызовы этих методов не будут изменять URL.

  • callbacks: onLeave, afterLoad В колбэках можно проверять текущее состояние истории и управлять логикой приложения в зависимости от того, записываются ли изменения в историю.

Практические советы

  • SEO и прямые ссылки Для сайтов, где важно, чтобы каждая секция имела уникальный URL для поисковой оптимизации, рекомендуется всегда использовать setRecordHistory(true).

  • Презентации и слайд-шоу Если используется анимация или автоматическая прокрутка, отключение истории уменьшает вероятность случайного срабатывания кнопки «Назад» и нарушения последовательности слайдов.

  • Сочетание с anchors Если проект использует параметр anchors для секций, метод setRecordHistory позволяет синхронизировать изменение URL с выбранными якорями.

Итоговое поведение

Параметр boolean Изменения URL Кнопка «Назад» Кнопка «Вперед»
true Да Возвращает Переходит
false Нет Не влияет Не влияет

Метод setRecordHistory обеспечивает гибкий контроль навигации и истории в fullPage.js, что делает его незаменимым для проектов с длинной прокруткой, презентациями и интерактивными лендингами.

Оглавление