Ссылка вида /page/#contacts ведёт к элементу с id="contacts". Обычно браузер прокручивает страницу сам. Если переход не работает или заголовок оказывается под шапкой, сначала нужно определить причину.
Что проверить
- В документе есть элемент с нужным
id, и этот ID не повторяется. Регистр букв имеет значение. - Блок не скрыт и уже добавлен в DOM. HTML, который приложение создаст позже, ещё недоступен для поиска.
- Изображения и другие блоки выше якоря не меняют высоту после перехода. Укажи размеры изображений или
aspect-ratio, чтобы заранее выделить место. - Фиксированная шапка не перекрывает целевой блок.
Если блок перекрыт шапкой
Задай отступ прокрутки. В этом примере 80 пикселей — высота шапки и небольшой запас; подставь своё значение.
[id] {
scroll-margin-top: 80px;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}Если контент создаётся JavaScript
Вызови прокрутку после добавления нужного блока в DOM. Функция ниже ищет элемент по ID, поэтому символы вроде двоеточия или точки не превращаются в CSS-селектор. Некорректную кодировку URL она обрабатывает без ошибки.
function scrollToCurrentHash() {
if (!window.location.hash) return;
let id;
try {
id = decodeURIComponent(window.location.hash.slice(1));
} catch {
return;
}
const target = document.getElementById(id);
if (!target) return;
target.scrollIntoView({ block: 'start', behavior: 'auto' });
}
// Вызови после того, как твой код добавил целевой блок в документ:
// scrollToCurrentHash();Добавь функцию в JS-файл страницы, а вызов — в обработчик завершения отрисовки твоего приложения. В React или другом фреймворке используй соответствующий этап после обновления DOM. Само объявление функции прокрутку не запускает.
Почему load и setTimeout не дают гарантии
Событие window.load ждёт обычные зависимые ресурсы, но не лениво загружаемые изображения и не произвольные запросы приложения. Пауза в 500 мс тоже не означает, что контент готов. Если положение блока продолжает меняться, нужно устранить сдвиги разметки или дождаться конкретной операции, а не увеличивать задержку.
Проверь прямое открытие ссылки с якорем, переход внутри страницы, узкий экран и медленную загрузку. Плавное движение должно учитывать настройку уменьшения анимации.