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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените статью
Просто Линукс
Добавить комментарий