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

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

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

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

где:

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

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

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

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

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

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

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

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

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

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

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

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

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

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