Якорные ссылки, якоря — это ссылки, указывающие на отдельный элемент страницы. При нажатии на такую ссылку браузер мгновенно перемещается к указанному элементу. Якоря используют для навигации в пределах одной страницы. Например, в оглавлении или меню длинной страницы.
Чтобы сделать такую ссылку, нужно добавить идентификатор элементу и сослаться на него в ссылке с помощью решётки, диеза:
<nav class="menu">
<ul>
<li><a href="#design">Дизайн</a></li>
<li><a href="#music">Музыка</a></li>
</ul>
</nav>
<!-- ... -->
<section id="design">
<h3>Дизайн</h3>
<!-- ... -->
</section>
<section id="music">
<h3>Музыка</h3>
<!-- ... -->
</section>Перемещение по якорю прокручивает окно вплотную к указанному элементу. Если на странице есть залипающая шапка, элемент может скрыться под ней. Это можно исправить, задав scroll-margin-top
[id] {
scroll-margin-top: max(4.5rem, 15vh); /* Пусть все элементы, на которые можно сослаться якорями, при скролле к ним отступают минимум на 15% высоты экрана или 4.5rem. Так даже на низких экранах или на телефонах в альбомной ориентации меню не будет налезать на текст, к которому привёл якорь. Важный момент: это свойство не влияет на внешний отступ элемента */
}Чтобы перемещение по якорю было не мгновенным, а плавным, добавим scroll-behavior
html {
scroll-behavior: smooth; /* К сожалению, управлять анимацией перехода пока нельзя */
}Чтобы дополнительно выделить элемент, на который ссылается якорь, например, в длинном списке комментариев, используем псевдокласс :target
:target {
position: relative; /* :target — текущий элемент, на который ссылается якорь в урле. Спозиционируем его относительно, чтобы задать контекст для позиционирования подложки с фоном */
}
:target:before {
content: '';
position: absolute; /* Подкладываем псевдоэлемент :before с желтым фоном под содержимое элемента */
inset: -.5em;
background: rgba(255, 245, 211, .5);
z-index: -1;
}Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.