Как сделать отступ сверху для якорных ссылок 2023

В последнее время я стал использовать на своих сайтах якорные ссылки, так как если статья очень БОЛЬШАЯ, то нужно давать возможность человеку СРАЗУ получить доступ к нужному разделу статьи.

Выглядит у меня это вот так, например, на статье про оформление заказа на Алиэкспресс:

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

Да и много пунктов в меню быть не должно, а подзаголовков может быть слишком МНОГО. Но не в этом даже суть, а вот в чем.

Как сделать отступ сверху для якорных ссылок при фиксированном меню?

У меня на сайте фиксированное меню и когда человек нажимает на якорную ссылку, подзаголовок, который прикреплен к этой ссылке, поднимается и фиксируется ПОД или ЗА меню.

И это сбивает с толку, так как не понятно, туда ты попал по ссылке или нет? И самое противное, что обычными CSS стилями вопрос не решить.

Я пытался ставить плагины, которые позволяют делать этот отступ якорных ссылок сверху. Самый удачный плагин из тех, что я нашел — это Easy Smooth Scroll Links

Но у него есть проблема в моем случае: из-за него переставала работать кнопка ВВЕРХ внизу сайта, которая для меня ОЧЕНЬ важна, так как в ней реферальная ссылка.

И вот сегодня с утра у меня получилось за пол часа решить проблему ОЧЕНЬ просто и быстро. Решил поделиться с вами и самому на память все это записать.

Код для отступа якорных ссылок

Что нужно сделать, чтобы якоря работали с отступом от верхнего края сайта? Вначале в footer.php вставляем скрипт:

<script type="text/javascript">
$('.navigate a').bind("click", function(e) {
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top - 109
}, 1000);
e.preventDefault();
});
</script>

$('.navigate a').bind("click", function(e) {

var anchor = $(this);

$('html, body').stop().animate({

scrollTop: $(anchor.attr('href')).offset().top - 109

}, 1000);

e.preventDefault();

});

</script>

Далее открываем файл style.css и вписываем туда такой код:

.content {
margin-top: 100px;
}

.content {

margin-top: 100px;

}

Далее открываем в шаблоне файл отвечающий за одиночную запись, например, это может быть single.php или подобный ему. Ищем там код выводящий текст статьи и заключаем его в код:

<nav class="navigate">
 <?php } the_content(); ?> это вывод статьи на сайте...
</nav>

<?php } the_content(); ?> это вывод статьи на сайте...

</nav>

И все. После этого якорные ссылки будут с отступом от верха сайта и еще будет эффект скольжения, что тоже приятно для глаз пользователя. Если что не понятно, пишите в комментариях…

Как сделать отступ сверху для якорных ссылок?

Как сделать отступ сверху для якорных ссылок при фиксированном меню?

Код для отступа якорных ссылок

Нравится Linux? А такая футболка есть?