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


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

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

Как оформить заказ на Алиэкспресс и сделать покупку в 2021?

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

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

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

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

И это сбивает с толку, так как не понятно, туда ты попал по ссылке или нет? И самое противное, что обычными 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>

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

.content {
margin-top: 100px;
}

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

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

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

Как сделать кнопку КОПИРОВАТЬ URL страницы?
Как изменить стили в текстовом редакторе Вордпресс?

Некоторые мои сайты настроены так, что на них нельзя скопировать текст. Достали эти дорвейщики и прочая нечесть, которые воруют твой читать дальше...

Как изменить стили в текстовом редакторе Вордпресс?
Редактировать запись ‹ Просто Линукс — WordPress

Когда у меня был старенький ноутбук с диагональю экрана 13 дюймов и разрешение 1366х1080, то писать в текстовом редакторе Wordpress читать дальше...

Как вставить промокоды Алиэкспресс в статью?
Купоны и ПРОМОКОДЫ Алиэкспресс на декабрь 2021 от продавцов...

Недавно передо мной встала задача: вставить промокоды Алиэкспресс в статью. Казалось бы, что сложного? Скопируй промокод и всё... Но сложность читать дальше...

Открытие и ведение ресторанного бизнеса в Сети
Титанический труд под красивой картинкой

Кто не любит вкусно поесть? Странный вопрос. Тематика еды и общественного питания интересна современному человеку. Особое внимание привлекают к себе читать дальше...

Напишите комментарий