Метод setLockAnchors предназначен для управления
поведением URL-якорей при навигации по секциям сайта с использованием
библиотеки fullPage.js. В основе работы fullPage.js лежит система якорей
(anchors), которая позволяет привязывать каждую секцию к уникальному
идентификатору в URL. Это обеспечивает возможность прямого перехода на
конкретную секцию через ссылку, а также корректную работу истории
браузера и кнопок «Назад»/«Вперед».
setLockAnchors управляет возможностью изменения
URL-якоря при переключении секций.
fullpage_api.setLockAnchors(booleanValue);
booleanValue – логическое значение:
true – блокирует обновление URL при переходе между
секциями.false – снимает блокировку, URL обновляется в
соответствии с текущей секцией.Если необходимо, чтобы при прокрутке секций URL в адресной строке не менялся, используется:
fullpage_api.setLockAnchors(true);
Это особенно актуально в ситуациях, когда:
Для восстановления стандартного поведения и обновления URL при переходе между секциями:
fullpage_api.setLockAnchors(false);
После вызова этого метода fullPage.js снова будет синхронизировать URL с текущей секцией, добавляя якорь в адресную строку.
Метод setLockAnchors тесно связан с параметрами и
методами:
anchors – массив имен якорей, задаваемый при инициализации fullPage.js. Пример инициализации:
new fullpage('#fullpage', {
anchors: ['first', 'second', 'third']
});moveTo(sectionAnchor) – метод для программного
перехода к секции. Если якорь заблокирован через
setLockAnchors(true), вызов moveTo изменит
видимую секцию, но URL останется прежним:
fullpage_api.setLockAnchors(true);
fullpage_api.moveTo('third');onLeave / afterLoad – коллбэки, в которых можно динамически включать или отключать блокировку якорей в зависимости от условий:
new fullpage('#fullpage', {
anchors: ['one', 'two', 'three'],
afterLoad: function(origin, destination, direction){
if(destination.index === 1){
fullpage_api.setLockAnchors(true);
} else {
fullpage_api.setLockAnchors(false);
}
}
});История браузера При блокировке якорей
(true) история браузера не обновляется при переходах между
секциями. Кнопки «Назад» и «Вперед» будут вести себя как будто страница
не меняется.
Динамическое управление Метод можно вызывать в любой момент после инициализации fullPage.js, что позволяет включать или отключать блокировку якорей по событиям, например, при открытии модальных окон или интерактивных блоков.
Не влияет на навигацию через клавиши и мышь Даже при блокировке якорей, скролл, свайп или навигация через стрелки клавиатуры будут работать корректно, но URL останется неизменным.
Сочетание с lockAnchors при
инициализации При инициализации fullPage.js можно сразу задать
блокировку через опцию:
new fullpage('#fullpage', {
lockAnchors: true
});
В дальнейшем метод setLockAnchors позволяет динамически
изменять это поведение.
Пример 1: Временная блокировка якорей при анимации
function startAnimation() {
fullpage_api.setLockAnchors(true);
fullpage_api.moveTo('second');
setTimeout(() => {
fullpage_api.setLockAnchors(false);
}, 2000);
}
Пример 2: Блокировка URL на определённой секции
new fullpage('#fullpage', {
anchors: ['home', 'about', 'contact'],
afterLoad: function(origin, destination){
if(destination.anchor === 'about'){
fullpage_api.setLockAnchors(true);
} else {
fullpage_api.setLockAnchors(false);
}
}
});
Метод setLockAnchors является мощным инструментом для
гибкого управления URL-якорями в проектах на fullPage.js, обеспечивая
как динамическую блокировку, так и возможность интеграции с другими
функциями навигации и коллбэками библиотеки.