Skip to main content
создание сайта под ключ
×

Обсудить проект

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение. Или звоните: +7(916) 107-51-99 (10.00–18.00, Мск.)

Как к вам обращаться?
Сообщите корректный адрес электронной почты.
Заполните поле, опишите суть задачи.
Необходимо подтвердить согласие с Политикой.

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

Достаточно часто приходится использовать якоря на страницах и, как следствие, точно хочется поместить анкор повыше заголовка. Способов реализации достаточно много, остановимся на одном, что имеет некоторые преимущества. Чтобы более не гуглить (и не думать) в дальнейшем про реализацию — зафиксируем метод в данном материале.

Для того чтобы сделать отступ для якоря от верхней границы экрана, создадим для нашего якоря следующую конструкцию, и вставляем ее там где должен располагаться якорь, например, перед заголовком h2:

<div class="anchor"><span id="service"></span></div>

пропишем правило css:

/* Отступы якорей */
.anchor {position:relative;}
.anchor #service {position:absolute; top:-20px;}

где:

#service — id элемента с якорем.

top:-20px; — отступ от верхнего края экрана для якоря.

Преимущество этого способа

  • можно для разных якорей задавать разные значения отступов, немного сократив css.
  • смещение работает при переходе на якорь с другой страницы (/index.php#service)

Как это работает: Ниже заголовок с прописанным якорем, под ним, после тестового текста — ссылка на якорь этого заголовка.

Тестовый заголовок Ночь в тоскливом октябре

Текст для примера:

...«Растущая луна. Рассерженная кошка. Перо на ветру. Наступает осень. Умирает трава.»

...«Такие минуты редки, такие минуты быстротечны, но всегда ярко светят нам, если сумеешь их поймать, измерить, сохранить, и потом, в тяжелые времена, возвращаешься к ним там, в светлых чертогах памяти, на фоне языков пламени.»;

©«Ночь в тоскливом октябре» Роджер Желязны

Ссылка на анкор

Для шаблонов (сайтов) с использованием uikit имеет смысл добавить плавную прокрутку:

<a href="#service" uk-scroll>Ссылка</a>

Впрочем, с uikit отступ от якоря можно реализовать «своими силами», но это иной вопрос. Обычный css временами удобней.

<a href="#service" uk-scroll='{"offset":30}'>Ссылка на анкор</a>

Пустяк, конечно. Но времени (иногда) тратится на подобные пустяки изрядно.