Якорь – это ссылка, которая переадресует пользователя на определенное место на странице. Чтобы создать якорь в CSS, нужно использовать псевдоэлемент :target в сочетании с идентификатором элемента.
- Сначала создайте элемент, на который нужно установить якорь и добавьте идентификатор:
<h2 id="section1">Первая секция</h2>- Добавьте ссылку на этот элемент внутри контента:
<a href="#section1">Перейти к первой секции</a>- В CSS определите стили для элемента родителя и примените стили для псевдоэлемента
:target:
h2 {
margin-top: 100px;
}
h2:target {
border: 1px solid red;
}В этом примере мы задаем верхний отступ для элемента h2 и добавляем рамку при выборе элемента через якорь.
- При нажатии ссылки, содержащей якорь, пользователь будет перемещен на элемент с соответствующим идентификатором. Если вы хотите задать дополнительное смещение, добавьте отрицательный отступ для элемента, на который указывает якорь, например:
h2 {
margin-top: 200px;
padding-top: 50px;
}
h2:target {
margin-top: -150px;
padding-top: 0;
}В этом примере мы устанавливаем верхний отступ для элемента h2 в 200px и добавляем верхний внутренний отступ в 50px. Затем, при выборе элемента через якорь, устанавливаем смещение в -150px, чтобы учитывать верхний отступ и добавленный отступ внутри элемента.
Обратите внимание, что элементы, на которые устанавливаются якори, должны иметь уникальные идентификаторы.
