Синхронизация с историей

Smooth Scroll предоставляет встроенные возможности для работы с навигацией и историей браузера. Это позволяет пользователю не только плавно перемещаться по странице, но и корректно управлять URL, обеспечивая поддержку кнопок «назад» и «вперед», а также прямых ссылок на определённые секции.

Управление URL при прокрутке

Для синхронизации с историей ключевым является параметр updateURL. Если он установлен в true, Smooth Scroll будет автоматически изменять URL в адресной строке при переходе к определённой секции:

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

В этом примере каждый клик по ссылке с хешем (#section1, #contact) приведёт к плавной прокрутке и одновременному обновлению URL. При этом создаётся новая запись в истории браузера, что позволяет использовать кнопки навигации.

Особенности работы с updateURL:

  • Добавление новой записи в историю (pushState) происходит только при навигации по ссылкам Smooth Scroll.
  • Если URL уже содержит хеш, библиотека корректно заменяет его, не создавая лишних дубликатов в истории.
  • Значение хеша синхронизируется с идентификатором целевого элемента (id).

Обработка событий истории

Smooth Scroll предоставляет API для отслеживания изменения URL и выполнения действий при возврате по истории:

document.addEventListener('scrollStart', function(event) {
  console.log('Началась прокрутка к секции:', event.target);
});

document.addEventListener('scrollStop', function(event) {
  console.log('Прокрутка завершена на секции:', event.target);
});

При возврате пользователя назад (popstate) Smooth Scroll автоматически инициирует плавный скролл к соответствующему элементу, если хеш присутствует в URL. Для расширенной обработки можно подключить событие popstate вручную:

window.addEventListener('popstate', function(event) {
  const hash = window.location.hash;
  if (hash) {
    scroll.animateScroll(document.querySelector(hash));
  }
});

Этот подход полезен, если требуется интеграция с другими библиотеками, например, для подгрузки динамического контента при смене секции.

Интеграция с динамическими ссылками

При работе с динамически созданными ссылками важно инициализировать Smooth Scroll после добавления элементов в DOM:

function initDynamicLinks() {
  const dynamicLinks = document.querySelectorAll('.dynamic-link');
  dynamicLinks.forEach(link => scroll.addLink(link));
}

Метод addLink позволяет добавить обработку к новым ссылкам без необходимости полной реинициализации объекта Smooth Scroll.

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

Библиотека поддерживает дополнительные опции для более точного управления историей:

  • history: true | false – включение полной поддержки History API.
  • updateURL: true | false – обновление URL при скролле.
  • popstate: true | false – автоматическая обработка возврата по истории.

Пример конфигурации с полной синхронизацией:

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

В этой конфигурации все переходы по ссылкам с хешами обновляют URL, создают записи истории и корректно обрабатывают возврат назад без дополнительного кода.

Работа с якорями и идентификаторами

Для правильной синхронизации необходимо, чтобы элементы имели уникальные id. Если несколько элементов имеют одинаковый идентификатор, Smooth Scroll прокрутит к первому найденному.

<section id="about"></section>
<section id="services"></section>
<section id="contact"></section>

При клике на <a href="#services"> произойдёт плавный скролл к секции с id="services", а URL обновится на example.com/#services.

Устранение конфликтов с другими библиотеками

Если на странице используются другие скрипты, изменяющие URL, важно управлять приоритетами событий popstate и hashchange. Smooth Scroll корректно интегрируется, если:

  • События обрабатываются через window.addEventListener без отмены действий по умолчанию.
  • Объект Scroll создаётся после загрузки всех элементов, на которые ссылаются хеши.
  • Не используются одновременные вызовы scrollTo и animateScroll, чтобы избежать конфликтов плавной анимации.

Вывод

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

Оглавление