Глубокие ссылки (deep linking) позволяют напрямую открывать конкретную секцию или слайд страницы через URL. В контексте fullPage.js это достигается за счёт синхронизации состояния интерфейса с хэшем в адресной строке браузера.
Каждой секции и слайду может быть назначен уникальный якорь (anchor), который становится частью URL:
https://example.com/#section2
https://example.com/#section2/slide3Такой подход обеспечивает:
Для работы глубоких ссылок используется параметр
anchors:
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage']
});HTML-структура:
<div id="fullpage">
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
</div>Соответствие происходит по порядку. При переходе ко второй секции URL станет:
#secondPageСлайды внутри секций также могут иметь собственные якоря через
параметр slidesNavigation и anchors в
массиве:
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage'],
slidesNavigation: true
});Для задания якорей слайдам используется атрибут
data-anchor:
<div class="section" data-anchor="secondPage">
<div class="slide" data-anchor="slide1"></div>
<div class="slide" data-anchor="slide2"></div>
</div>URL будет выглядеть так:
#secondPage/slide2По умолчанию fullPage.js изменяет URL при прокрутке. Это поведение можно отключить:
new fullpage('#fullpage', {
lockAnchors: true
});При включённой опции:
Используется в случаях, когда:
Переход к секциям и слайдам программно:
fullpage_api.moveTo('secondPage');
fullpage_api.moveTo('secondPage', 'slide2');Переход по индексу:
fullpage_api.moveTo(2); // вторая секцияВажно: при использовании якорей рекомендуется всегда обращаться именно к ним, а не к индексам, чтобы избежать ошибок при изменении структуры.
Для интеграции с роутингом используются события:
new fullpage('#fullpage', {
afterLoad: function(origin, destination, direction) {
console.log(destination.anchor);
}
});Доступные данные:
origin — предыдущая секцияdestination — текущая секцияdestination.anchor — имя якоряdestination.index — индексЭто позволяет:
Для более сложного роутинга используется
history.pushState:
new fullpage('#fullpage', {
afterLoad: function(origin, destination) {
history.pushState(null, null, '#' + destination.anchor);
}
});Преимущества:
При загрузке страницы fullPage.js автоматически анализирует URL и переходит к соответствующей секции.
Пример:
https://example.com/#thirdPageИнициализация:
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage']
});Страница откроется сразу на третьей секции.
Если якорь не найден:
Контролирует добавление состояний в историю браузера:
new fullpage('#fullpage', {
recordHistory: false
});Поведение:
true (по умолчанию): каждое изменение добавляется в
историюfalse: URL обновляется, но история не засоряетсяИспользуется, когда:
Связывание меню с секциями:
new fullpage('#fullpage', {
anchors: ['home', 'about', 'contact'],
menu: '#menu'
});HTML:
<ul id="menu">
<li data-menuanchor="home"><a href="#home">Главная</a></li>
<li data-menuanchor="about"><a href="#about">О нас</a></li>
<li data-menuanchor="contact"><a href="#contact">Контакты</a></li>
</ul>Преимущества:
При использовании SPA-фреймворков (React, Vue, Angular) возможны конфликты:
Решения:
1. Отключение управления URL в fullPage.js:
lockAnchors: true2. Полная передача контроля роутеру:
3. Гибридный подход:
При включённом recordHistory:
При отключённом:
Для кастомной логики:
window.addEventListener('popstate', function() {
// обработка возврата
});anchorsПри изменении структуры DOM:
fullpage_api.destroy('all');
new fullpage('#fullpage', {
anchors: ['new1', 'new2', 'new3']
});Важно:
1. Лендинги с отдельными разделами:
2. Документация:
3. Презентации:
4. SPA-приложения:
Особенности:
Для улучшения SEO:
Несоответствие anchors и секций:
anchors: ['one', 'two'] // но 3 секцииДублирование якорей:
<div data-anchor="page"></div>
<div data-anchor="page"></div>Использование индексов вместо якорей:
Конфликты с роутером:
about,
services, contact)Глубокие ссылки в fullPage.js превращают прокручиваемый интерфейс в полноценную навигационную систему, где каждая секция становится отдельной точкой входа.