Метод setLockAnchors

Метод setLockAnchors предназначен для управления поведением URL-якорей при навигации по секциям сайта с использованием библиотеки fullPage.js. В основе работы fullPage.js лежит система якорей (anchors), которая позволяет привязывать каждую секцию к уникальному идентификатору в URL. Это обеспечивает возможность прямого перехода на конкретную секцию через ссылку, а также корректную работу истории браузера и кнопок «Назад»/«Вперед».

setLockAnchors управляет возможностью изменения URL-якоря при переключении секций.


Синтаксис

fullpage_api.setLockAnchors(booleanValue);
  • booleanValue – логическое значение:

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

Применение

1. Блокировка якорей

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

fullpage_api.setLockAnchors(true);

Это особенно актуально в ситуациях, когда:

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

2. Разблокировка якорей

Для восстановления стандартного поведения и обновления 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);
            }
        }
    });

Важные особенности

  1. История браузера При блокировке якорей (true) история браузера не обновляется при переходах между секциями. Кнопки «Назад» и «Вперед» будут вести себя как будто страница не меняется.

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

  3. Не влияет на навигацию через клавиши и мышь Даже при блокировке якорей, скролл, свайп или навигация через стрелки клавиатуры будут работать корректно, но URL останется неизменным.

  4. Сочетание с 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, обеспечивая как динамическую блокировку, так и возможность интеграции с другими функциями навигации и коллбэками библиотеки.