Якоря секций

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

Определение якоря для секции

Для каждой секции можно задать уникальный идентификатор, который будет использоваться в URL и навигации. Это делается с помощью атрибута data-anchor:

<div id="fullpage">
    <div class="section" data-anchor="home">Главная секция</div>
    <div class="section" data-anchor="about">О компании</div>
    <div class="section" data-anchor="services">Услуги</div>
    <div class="section" data-anchor="contact">Контакты</div>
</div>
  • data-anchor — строка, которая задает якорь. Она должна быть уникальной в пределах всей страницы.
  • При инициализации fullPage.js эти якоря используются для навигации и синхронизации URL.

Настройка fullPage.js с использованием якорей

Якоря активируются через опцию anchors при инициализации плагина:

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

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

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

Использование этих настроек позволяет синхронизировать URL с текущей секцией. Например, при переходе к секции “О компании” URL будет изменен на site.com/#about.

Переход к секции по якорю

FullPage.js поддерживает переход к секции по якорю с помощью методов API:

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

Метод moveTo принимает:

  1. Индекс секции (начинается с 1)
  2. Или строковый якорь, указанный в anchors.

Также можно комбинировать с горизонтальными слайдами:

fullpage_api.moveTo('services', 2); // переходит к 2-му слайду секции "services"

Работа с URL и хэшами

При включении якорей fullPage.js автоматически обновляет хэш в URL. Это открывает возможности:

  • Поделиться ссылкой на конкретную секцию.
  • Использовать стандартные механизмы браузера (кнопки «назад» и «вперед»).
  • Встроенная поддержка навигации по хэшу для SPA.

Пример URL с якорем: https://example.com/#contact — сразу открывает секцию «Контакты».

Связывание якорей с навигацией

Навигационные элементы можно привязать к якорям с помощью стандартных ссылок <a>:

<nav>
    <a href="#home">Главная</a>
    <a href="#about">О компании</a>
    <a href="#services">Услуги</a>
    <a href="#contact">Контакты</a>
</nav>

FullPage.js автоматически перехватывает клики по таким ссылкам и плавно прокручивает страницу к нужной секции.

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

FullPage.js позволяет изменять якоря после инициализации:

fullpage_api.setAllowScrolling(true);
fullpage_api.setScrollingSpeed(700);
fullpage_api.moveTo('about');

Если необходимо динамически менять якорь, рекомендуется использовать метод moveTo и обновлять массив anchors при пересоздании fullPage.js.

Управление горизонтальными слайдами с якорями

Для секций с горизонтальными слайдами (.slide) можно назначать якоря и для слайдов:

<div class="section" data-anchor="services">
    <div class="slide" data-anchor="web">Web-разработка</div>
    <div class="slide" data-anchor="mobile">Мобильные приложения</div>
</div>

Переход к конкретному слайду:

fullpage_api.moveTo('services', 'mobile'); // перемещает к слайду "mobile"

URL при этом обновляется на: https://example.com/#services/mobile

Настройка обратной синхронизации URL

Опция recordHistory управляет тем, будет ли fullPage.js добавлять изменения якоря в историю браузера:

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

Поддержка событий при смене секций

FullPage.js предоставляет события для работы с якорями:

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'services', 'contact'],
    afterLoad: function(origin, destination, direction){
        console.log('Текущая секция: ' + destination.anchor);
    }
});
  • afterLoad вызывается после загрузки новой секции.
  • destination.anchor возвращает текущий якорь секции.
  • Позволяет динамически изменять контент или стили в зависимости от активной секции.

Практические рекомендации

  • Имена якорей должны быть краткими, уникальными и не содержать пробелов.
  • Для мультиязычных сайтов можно использовать комбинации языка и названия секции (ru-about, en-about).
  • При работе с горизонтальными слайдами рекомендуется всегда задавать data-anchor для каждого слайда для точной навигации.
  • Использование якорей облегчает SEO и улучшает пользовательский опыт при прямых ссылках на разделы страницы.

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

Хотите, чтобы я это сделал?

Оглавление