Nikovit <Путешествия и разработка>

Отступ для якоря от верхнего края экрана на чистом css

Для того чтобы сделать отступ для якоря от верхней границы экрана, создадим для нашего якоря следующую конструкцию, и вставляем ее там где должен располагаться якорь, например перед заголовком h2:
<div class="anchor">
    <span id="service"></span>
</div>
и пропишем правило css
/* Отступы якорей */
.anchor{
    position: relative;
}
.anchor #service{
    position:absolute; 
    top:-120px;
}
где:
#service - id элемента с якорем.
top:-120px; - отступ от верхнего края экрана для якоря  

Преимущество этого способа в том что мы можем для разных якорей задавать разные значения отступов.

Также смещение работает при переходе на якорь с другой страницы (/index.php#service)