updateURL() - обновление адресной строки

Метод updateURL() в библиотеке Smooth Scroll отвечает за синхронизацию адресной строки браузера с текущим положением страницы при прокрутке. Это позволяет браузеру корректно отображать хэш в URL, обеспечивает работу кнопок «Назад» и «Вперед», а также упрощает копирование ссылок на конкретные секции сайта.

Принцип работы

Когда пользователь прокручивает страницу к якорю через Smooth Scroll, библиотека может:

  1. Добавить хэш к URL без перезагрузки страницы.
  2. Обновить текущий хэш, если прокрутка выполняется повторно.
  3. Не изменять URL, если это отключено в настройках.

Метод updateURL() вызывается автоматически, если в конфигурации Smooth Scroll включена опция updateURL: true. В противном случае его можно вызвать вручную.

Синтаксис

const scroll = new SmoothScroll('a[href*="#"]', {
  updateURL: true
});

// Вручную
scroll.updateURL('#section1');

Параметры:

  • hash (строка, необязательный) – хэш якоря, который будет установлен в адресной строке. Если параметр не передан, библиотека определяет текущий якорь автоматически.

Возвращаемое значение: Метод ничего не возвращает; его задача — изменить URL без перезагрузки страницы.

Настройка поведения

Опция updateURL в конфиге Smooth Scroll:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 800,
  offset: 100,
  updateURL: true
});
  • true – URL будет обновляться при прокрутке к якорю.
  • false – URL останется без изменений, даже если прокрутка произошла.

Дополнительно можно управлять поведением через обработку события scrollStart:

scroll.on('scrollStart', function (event, anchor, toggle) {
  // Можно выполнить действия до обновления URL
});

Обновление URL без перезагрузки страницы

Smooth Scroll использует метод history.pushState() для изменения хэша в адресной строке. Это позволяет:

  • Сохранять состояние прокрутки.
  • Обеспечивать корректную навигацию кнопками «Назад» и «Вперед».
  • Не перезагружать страницу при переходе к якорю.

Пример:

scroll.updateURL('#about-us');

После вызова URL изменится на https://example.com/#about-us, но страница останется на текущей позиции.

Особенности работы с якорями

  1. Если на странице несколько элементов с одинаковым id, Smooth Scroll использует первый найденный.
  2. При динамическом создании секций метод updateURL() может быть вызван вручную после добавления новых якорей.
  3. Если на странице нет элемента с заданным хэшем, библиотека не изменяет URL и не вызывает ошибок.

Совместимость с браузерами

Метод работает во всех современных браузерах, поддерживающих history.pushState(). Для устаревших браузеров (например, IE9 и ниже) изменения URL могут не применяться, и метод фактически игнорируется.

Практические примеры

Автоматическое обновление при клике на ссылку:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,
  updateURL: true
});

Ручное обновление после динамической прокрутки:

scroll.animateScroll(document.querySelector('#contact'));
scroll.updateURL('#contact');

Отслеживание текущей секции и обновление URL:

document.addEventListener('scroll', function() {
  const section = document.querySelector('.active-section');
  if (section) {
    scroll.updateURL('#' + section.id);
  }
});

Рекомендации по использованию

  • Использовать updateURL: true для одностраничных сайтов с большим количеством якорей.
  • Вызывать updateURL() вручную при динамически созданных секциях.
  • Проверять уникальность id элементов, чтобы избежать некорректного обновления хэшей.
  • Совмещать с offset и speed для плавной прокрутки без резкой смены URL.

Метод updateURL() обеспечивает корректное управление адресной строкой, улучшает пользовательский опыт и поддерживает стандартную навигацию браузера при работе с якорями.

Оглавление