Если вы занимаетесь версткой сайтов, или у вас уже есть свой сайт, то вы по любому сталкиваетесь или столкнётесь с якорными меню или оглавлением и следовательно с довольно частой проблемой. При переходе по ссылке-якорю верхняя часть контента скрывается (обычно это заголовок) к примеру фиксированным меню (это сейчас модно), в итоге пользователь просто не понимает куда он попал, что негативно сказывается на юзабилити сайта.
Для тех кто не в курсе что такое якоря — это ссылка на определённый фрагмент текста, в данной статье в верху стоит якорное меню, для быстрой навигации по статье.
Пример HTML разметки якорного меню:
<ol class="yakory">
<li><a href="#link-1">Заголовок 1</a></li>
<li><a href="#link-2">Заголовок 2</a></li>
<li><a href="#link-3">Заголовок 3</a></li>
</ol>
<h2 id="link-1">Заголовок 1</h2>
<p>текст</p>
<h2 id="link-2">Заголовок 2</h2>
<p>текст</p>
<h3 id="link-3">Заголовок 3</h3>
Логика очень простая — вы кликаете на ссылку с якорем и перемещаетесь к самому якорю. И если сверху сайта есть фиксированный блок, то он скроет часть контента — как я писал выше. И ниже я рассмотрю несколько рабочих универсальных вариантов решения данной проблемы, при помощи CSS.
Универсальные варианты устранения смещения из-за фиксированного блока (шапка, меню).
Вариант 1.
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Это может работать, но оно будет перекрывать содержимое перед заголовком. Вы можете добавить position: relative
и z-index: -1
чтобы предотвратить наложение предыдущего содержимого.
Вариант 2.
a[name] {
padding-top: 75px;
margin-top: -75px;
display: inline-block; /* required for webkit browsers */
}
При желании вы можете добавить следующее, если цель все еще отключена:
vertical-align: top;
Если не помогло пишите , что не так. Помогла тоже пишите, какой вариант помог. Знаете более лучший вариант, делитесь.
Спасибо!! Попробовал оба, всё работает!
При использовании 1го варианта остаётся возможность использовать margin-top, так что отдаю предпочтение ему
Пожалуйста)