Как скорректировать якорь с фиксированной шапке при переходе с другой страницы?

Для корректировки якоря с фиксированной шапкой при переходе с другой страницы вам понадобится использовать 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;
}

Вы можете настроить стили в соответствии со своим дизайном и требованиями.

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