Как сделать якорь на блок и не получить переход в пустое место
Для перехода внутри страницы используйте якорь выбранного блока или его системный адрес вида #rec…, а для другой страницы добавьте перед хешем полный путь: /services#price. Браузер сначала открывает страницу, затем ищет цель. Если изображения или шрифты позже меняют высоту, позиция способна сместиться, поэтому проверяйте опубликованный сайт без кеша и учитывайте фиксированную шапку.
Короткий ответ
Внутри страницы — #price, с другой страницы — /services#price. Цель должна
быть уникальной и существовать в опубликованном HTML.
Системный или свой якорь
Адрес #rec123456789 работает без дополнительного имени, но привязан к номеру
блока. При пересборке или замене секции он меняется. Для публичной ссылки из
рекламы или письма удобнее стабильное короткое имя, которое вы контролируете.
Не используйте пробелы, кириллицу и одинаковое имя на нескольких элементах.
Другая страница
Ссылка #price не умеет догадаться, что блок находится в разделе услуг. Нужен
путь /services#price. На внешнем домене укажите полный URL.
После перехода браузер прокручивает страницу к цели. Если сверху фиксированное меню, добавьте отступ прокрутки:
#price { scroll-margin-top: 96px; }Почему позиция съезжает
Позднее изображение, собственный шрифт, аккордеон над целью или скрипт меняют высоту уже после первого перехода. Оптимизируйте ресурсы и не запускайте второй принудительный скролл без необходимости: он выглядит как прыжок.
Проверка
Пройдите ссылку с той же страницы, с другой страницы и прямым открытием в новой вкладке. Повторите без кеша на телефоне. Заголовок должен оставаться видимым, а кнопка «Назад» — возвращать человека ожидаемо.