Отступ для якоря от верхнего края экрана на 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>

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

Добавить комментарий


Планируете проект?

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение.

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

Планируете создание веб проекта?

Заполните форму и наш специалист свяжется с вами для консультации и составит для вас персональное предложение.

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

Получите бесплатную консультацию прямо сейчас!

Веб-студия «Reklama-No» специализируется на разработке сайтов для бизнеса. Для реализации задач вашего будущего/существующего сайта — мы подберем оптимальные решения. Подробно расскажем об особенностях создания веб-ресурса вашей тематики, попробуем ответить на все интересующие вас вопросы максимально полно, доступным языком, оперативно.
Мы понимаем желания/сомнения/проблемы наших клиентов и готовы дать полезные советы по работе с сайтом, опираясь на собственный много-много летний опыт.
Звоните нам и мы решим любые проблемы с вашим сайтом или задачи по его созданию. Хотя, лучше звоните сами.


+7(916) 107-51-99

Обсудите ваш проект со специалистом!

Оставьте свои контакты

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

Разработка сайтов «под ключ» любой сложности и назначения!

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

©2010–2022 веб-лаборатория «Reklama-No» | Создание, поддержка и продвижение сайтов