В последнее время я стал использовать на своих сайтах якорные ссылки, так как если статья очень БОЛЬШАЯ, то нужно давать возможность человеку СРАЗУ получить доступ к нужному разделу статьи.
Выглядит у меня это вот так, например, на статье про оформление заказа на Алиэкспресс:
Я не использую никаких плагинов для этого, так как ручками всегда лучше и гибче. Подобные плагины тупо копируют в ссылки подзаголовки страницы и тем самым создают дубли фраз.
Да и много пунктов в меню быть не должно, а подзаголовков может быть слишком МНОГО. Но не в этом даже суть, а вот в чем.
Как сделать отступ сверху для якорных ссылок при фиксированном меню?
У меня на сайте фиксированное меню и когда человек нажимает на якорную ссылку, подзаголовок, который прикреплен к этой ссылке, поднимается и фиксируется ПОД или ЗА меню.
И это сбивает с толку, так как не понятно, туда ты попал по ссылке или нет? И самое противное, что обычными CSS стилями вопрос не решить.
Я пытался ставить плагины, которые позволяют делать этот отступ якорных ссылок сверху. Самый удачный плагин из тех, что я нашел — это Easy Smooth Scroll Links
Но у него есть проблема в моем случае: из-за него переставала работать кнопка ВВЕРХ внизу сайта, которая для меня ОЧЕНЬ важна, так как в ней реферальная ссылка.
И вот сегодня с утра у меня получилось за пол часа решить проблему ОЧЕНЬ просто и быстро. Решил поделиться с вами и самому на память все это записать.
Код для отступа якорных ссылок
Что нужно сделать, чтобы якоря работали с отступом от верхнего края сайта? Вначале в footer.php вставляем скрипт:
1 2 3 4 5 6 7 8 9 |
<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 и вписываем туда такой код:
1 2 3 |
.content { margin-top: 100px; } |
Далее открываем в шаблоне файл отвечающий за одиночную запись, например, это может быть single.php или подобный ему. Ищем там код выводящий текст статьи и заключаем его в код:
1 2 3 |
<nav class="navigate"> <?php } the_content(); ?> это вывод статьи на сайте... </nav> |
И все. После этого якорные ссылки будут с отступом от верха сайта и еще будет эффект скольжения, что тоже приятно для глаз пользователя. Если что не понятно, пишите в комментариях…