Прокрутка к якорю с отступом сверху на CSS

Прокрутка к якорю с отступом сверху на CSS Верстка

Если вы занимаетесь версткой сайтов, или у вас уже есть свой сайт, то вы по любому сталкиваетесь или столкнётесь с якорными меню или оглавлением и следовательно с довольно частой проблемой. При переходе по ссылке-якорю верхняя часть контента скрывается (обычно это заголовок) к примеру фиксированным меню (это сейчас модно), в итоге пользователь просто не понимает куда он попал, что негативно сказывается на юзабилити сайта.

Для тех кто не в курсе что такое якоря — это ссылка на определённый фрагмент текста, в данной статье в верху стоит якорное меню, для быстрой навигации по статье.

Пример 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;

Если не помогло пишите , что не так. Помогла тоже пишите, какой вариант помог. Знаете более лучший вариант, делитесь.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Делись мнением о прочитанном

  1. Аноним

    Спасибо!! Попробовал оба, всё работает!
    При использовании 1го варианта остаётся возможность использовать margin-top, так что отдаю предпочтение ему

    Ответить
    1. Голягин Алексей

      Пожалуйста)

      Ответить