Автоматическая прокрутка к якорю

Якорные ссылки (они же anchor links) используются для перехода к определённой части страницы.
Пример:

https://site.ru/page#contacts

После загрузки страницы браузер автоматически прокручивает пользователя к блоку с id="contacts".

В чём проблема?

Иногда при переходе по такой ссылке страница не успевает прогрузиться полностью, особенно если на ней:

• много тяжёлых изображений, видео или скриптов;
• подключены сторонние шрифты;
• используется «ленивая загрузка» (lazy load).

В результате браузер не может найти нужный элемент во время первичной загрузки, и пользователь остаётся в начале страницы.

Решение

Чтобы гарантировать прокрутку к нужному блоку, можно добавить небольшой скрипт, который сработает после полной загрузки страницы:

window.addEventListener('load', () => {
  const hash = window.location.hash;
  if (hash) {
    // Подождём немного, чтобы всё точно успело загрузиться
    setTimeout(() => {
      const target = document.querySelector(hash);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
      }
    }, 500); // Можно увеличить задержку, если на странице много тяжёлых элементов
  }
});

Как работает код:

1. Отслеживаем событие load — оно срабатывает, когда загружены все ресурсы (HTML, CSS, JS, изображения).
2. Проверяем, есть ли в URL якорь (window.location.hash).
3. Делаем небольшую паузу (setTimeout), чтобы быть уверенными, что DOM и lazy-элементы прогрузились.
4. Ищем элемент по селектору #id.
5. Если элемент найден — скроллим к нему плавно.

Когда использовать

• При переходах по внешним ссылкам с якорем.
• На лендингах с тяжёлой графикой.
• Если на сайте используется ленивая загрузка.

Итог

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