В последнее время я стал использовать на своих сайтах якорные ссылки, так как если статья очень БОЛЬШАЯ, то нужно давать возможность человеку СРАЗУ получить доступ к нужному разделу статьи.
Выглядит у меня это вот так, например, на статье про оформление заказа на Алиэкспресс:
Я не использую никаких плагинов для этого, так как ручками всегда лучше и гибче. Подобные плагины тупо копируют в ссылки подзаголовки страницы и тем самым создают дубли фраз.
Да и много пунктов в меню быть не должно, а подзаголовков может быть слишком МНОГО. Но не в этом даже суть, а вот в чем.
Как сделать отступ сверху для якорных ссылок при фиксированном меню?
У меня на сайте фиксированное меню и когда человек нажимает на якорную ссылку, подзаголовок, который прикреплен к этой ссылке, поднимается вверх и фиксируется ПОД или ЗА меню.
И это сбивает с толку, так как не понятно, туда ты попал по ссылке или нет? И самое противное, что обычными 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 или подобный ему. Ищем там код выводящий текст статьи и заключаем его в код:
<strong><nav class="navigate"> </strong><em> <?php } the_content(); ?> это вывод статьи на сайте...</em><strong></nav></strong>
И все. После этого якорные ссылки будут с отступом от верха сайта и еще будет эффект скольжения, что тоже приятно для глаз пользователя. Если что не понятно, пишите в комментариях…
