Смещение якоря HTML для учета фиксированного заголовка

Я нашёл такое решение:

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">Мой якорь</h1>
</a>

Это не создаёт пробел в содержимом, и ссылки на якорь работают очень хорошо.

Для сведений, это сработало для меня:

[id]::before {
  content: '';
  display: block;
  height: 75px;
  margin-top: -75px;
  visibility: hidden;
}

Этот код создает псевдоэлемент ::before для любого элемента с определенным id. Он добавляет невидимый блок высотой 75 пикселей, который сдвигает содержимое вниз на 75 пикселей из-за отрицательного отступа. Это может быть полезно в случае, когда нужно создать пространство для элемента, не влияя на визуализацию.

Для решения задачи с использованием чистого CSS, вдохновленного Александром Савиным, вы можете использовать следующий код:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* необходимо для браузеров WebKit */
}

При желании, если целевой элемент все еще не попадает в область видимости экрана, вы можете добавить следующее свойство:

  vertical-align: top;

Этот подход поможет добавить необходимое пространство для якоря, обеспечивая при этом корректный переход по ссылкам в вашем документе.

Ваша проблема выглядит так, что вы хотите использовать селекторы :target и ::before для вашего CMS. Другие методы не учитывают текст в ссылке. Чтобы это исправить, просто отрегулируйте высоту и отрицательный отступ в соответствии с необходимым смещением.

Вот пример кода, который вы можете использовать:

:target::before {
    content: '';
    display: block;
    height: 180px; /* Установите необходимую высоту */
    margin-top: -180px; /* Отрицательный отступ для смещения */
}

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

Этот код объединяет множество элементов из предыдущих ответов и представляет собой маленькую (всего 194 байта после минификации) анонимную функцию jQuery. Настройте fixedElementHeight в соответствии с высотой вашего меню или блокирующего элемента.

(function($, window) {
    var adjustAnchor = function() {
        var $anchor = $(':target'),
                fixedElementHeight = 100;

        if ($anchor.length > 0) {
            $('html, body')
                .stop()
                .animate({
                    scrollTop: $anchor.offset().top - fixedElementHeight
                }, 200);
        }
    };

    $(window).on('hashchange load', function() {
        adjustAnchor();
    });

})(jQuery, window);

Если вам не нравится анимация, замените

$('html, body')
     .stop()
     .animate({
         scrollTop: $anchor.offset().top - fixedElementHeight
     }, 200);

на:

window.scrollTo(0, $anchor.offset().top - fixedElementHeight);

Минифицированная версия:

!function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);

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