Якоря используются чаще всего при создании лендингов – ссылки с якорями на блоки лендинга размещаются в главном меню сайта и в содержании статей.
Пример использования якорей:
Содержание
<a href="#oz001">Вступительное слово</a>
<a href="#yz004">Ключевые выводы</a>
….
<h3 id="oz001">Вступительное слово</h3>
…
<h3 id="yz004" style="text-align: right;">Ключевые выводы</h3>
Ссылка для прокрутки к якорю выглядит как: Ваш-сайт.РФ/адрес-страницы/#oz001
Если на сайте используется фиксированное верхнее меню, то при прокрутке часть страницы с якорем останавливается как бы за меню.
Для решения этой проблемы есть несколько способов. Мы предложим наиболее простые, не требующие знаний JS.
Вариант 1. В файле css (для Wordpress это может быть файл style.css в корне активной темы), размещаем следующие строки:
#oz001:before, #yz004:before {
display: block;
content: "";
height: 150px;
margin: -150px 0 0;
}
150px, -150px – это цифры, которые подгоняются до приемлемого результата, якоря указываем свои между # и :before.
Вариант 2. Для Wordpress всё еще проще. Устанавливаем плагин Page scroll to id
В нем достаточно одной единственной настройки – высоты отступа:
Демки режимов работы плагина с чудесами анимации, а также инструкция по настройке здесь