Якоря слайдов

В библиотеке fullPage.js якоря (anchors) представляют собой уникальные идентификаторы для каждого слайда или секции. Они позволяют:

  • Переходить к конкретной секции через URL (#anchor-name).
  • Управлять навигацией программно с помощью методов API.
  • Сохранять состояние прокрутки при обновлении страницы.

Якорь задается в момент инициализации fullPage.js через массив anchors. Пример конфигурации:

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

В этом примере:

  • Секция с якорем home будет доступна по адресу http://example.com/#home.
  • Навигационные подсказки будут соответствовать подпунктам меню.
  • Каждый якорь должен быть уникальным в пределах страницы.

Привязка якорей к слайдам

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

<div id="fullpage">
    <div class="section" data-anchor="home">
        <div class="slide" data-anchor="slide1">Слайд 1</div>
        <div class="slide" data-anchor="slide2">Слайд 2</div>
    </div>
    <div class="section" data-anchor="about">О нас</div>
</div>
new fullpage('#fullpage', {
    anchors: ['home', 'about'],
    slidesNavigation: true
});

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

  • Горизонтальные слайды автоматически создают URL вида #home/slide1.
  • При переходе по URL страница сразу отображает нужный слайд внутри секции.
  • slidesNavigation включает визуальные точки для навигации между слайдами.

Программное управление якорями

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

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

// Переход к конкретному слайду
fullpage_api.moveTo('home', 2); // home, второй слайд (нумерация с 1)

Преимущества такого подхода:

  • Гибкое управление без изменения URL вручную.
  • Возможность связывать действия пользователя с навигацией через якоря.

Настройка URL и истории

Опция lockAnchors позволяет контролировать, обновляется ли URL при смене секции:

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'services'],
    lockAnchors: false // true блокирует изменение URL
});
  • lockAnchors: false — URL обновляется при переходе между секциями и слайдами.
  • lockAnchors: true — навигация происходит без изменения адресной строки.

Опция recordHistory отвечает за добавление каждой прокрутки в историю браузера:

recordHistory: true // создаёт точки возврата при смене секций

Навигационные подсказки и работа с якорями

Опция navigationTooltips позволяет задать текст подсказки для каждой секции и автоматически связывается с массивом anchors:

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'services'],
    navigation: true,
    navigationTooltips: ['Главная', 'О нас', 'Услуги']
});
  • При наведении на навигационный элемент отображается соответствующий tooltip.
  • Tooltip автоматически синхронизируется с секцией через её якорь.

Динамическое добавление и удаление якорей

fullPage.js позволяет изменять массив якорей после инициализации с помощью методов API:

// Добавление нового якоря
fullpage_api.setAllowScrolling(true);
fullpage_api.moveTo('new-section'); // можно динамически переходить
  • Для полной динамической поддержки необходимо пересоздавать секцию с новым атрибутом data-anchor.
  • Это позволяет создавать страницы с меняющимся контентом без перезагрузки.

Советы по использованию якорей

  • Каждый якорь должен быть коротким, уникальным и без пробелов.
  • Для секций с горизонтальными слайдами рекомендуется использовать чёткую иерархию в URL (#section/slide).
  • Использовать navigationTooltips для улучшения UX, особенно на длинных страницах.
  • Контролировать lockAnchors и recordHistory, если важно сохранение состояния истории браузера.

Практический пример сложной страницы с якорями

HTML:

<div id="fullpage">
    <div class="section" data-anchor="home">
        <div class="slide" data-anchor="slide1">Главная 1</div>
        <div class="slide" data-anchor="slide2">Главная 2</div>
    </div>
    <div class="section" data-anchor="portfolio">
        <div class="slide" data-anchor="web">Веб</div>
        <div class="slide" data-anchor="mobile">Мобильные</div>
    </div>
    <div class="section" data-anchor="contact">Контакты</div>
</div>

JS:

new fullpage('#fullpage', {
    anchors: ['home', 'portfolio', 'contact'],
    navigation: true,
    slidesNavigation: true,
    navigationTooltips: ['Главная', 'Портфолио', 'Контакты'],
    recordHistory: true
});

Результат:

  • URL всегда отражает текущее положение (#home/slide1, #portfolio/mobile).
  • Встроенная навигация и подсказки помогают ориентироваться на странице.
  • Полный контроль над историей браузера и программной навигацией через API.

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

Если хочешь, я могу сразу написать этот блок примеров и практических решений.

Оглавление