Для корректировки якоря с фиксированной шапкой при переходе с другой страницы вам понадобится использовать JavaScript.
Когда пользователь нажимает на якорную ссылку, браузер автоматически перемещает страницу к элементу с соответствующим идентификатором. Однако, при наличии фиксированной шапки, содержимое страницы может не отобразиться корректно, поскольку оно может быть скрыто под шапкой.
Чтобы исправить эту проблему, необходимо скорректировать смещение, связанное с якорем, учитывая высоту фиксированной шапки. Это можно сделать следующим образом:
1. На странице, где находится якорь, добавьте класс или идентификатор к элементу, к которому нужно переместиться (например, <div id="target">...</div>
).
2. В файле JavaScript создайте функцию, которая будет вызываться при загрузке каждой страницы или при событии загрузки DOM. Например:
window.addEventListener('DOMContentLoaded', function() { adjustAnchorOffset(); }); function adjustAnchorOffset() { if (window.location.hash) { var targetElement = document.querySelector(window.location.hash); if (targetElement) { var headerElement = document.querySelector('.fixed-header'); var headerHeight = headerElement ? headerElement.offsetHeight : 0; window.scrollTo(window.scrollX, targetElement.getBoundingClientRect().top + window.scrollY - headerHeight); } } }
В этом примере, функция adjustAnchorOffset()
вызывается, когда страница полностью загружена. Она проверяет, есть ли якорь в URL (window.location.hash
), и если есть, то находит элемент с соответствующим идентификатором. Затем функция определяет высоту фиксированной шапки и использует метод window.scrollTo()
для скроллинга страницы к элементу с учетом смещения.
3. В файле CSS добавьте стили для фиксированной шапки. Например:
.fixed-header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #ffffff; z-index: 999; }
Вы можете настроить стили в соответствии со своим дизайном и требованиями.
Теперь, когда пользователь переходит с другой страницы на ваш сайт и нажимает на якорную ссылку, страница будет автоматически скроллиться к элементу с якорным идентификатором с учетом фиксированной шапки.