Якорные ссылки, якоря — это ссылки, указывающие на отдельный элемент страницы. При нажатии на такую ссылку браузер мгновенно перемещается к указанному элементу. Якоря используют для навигации в пределах одной страницы. Например, в оглавлении или меню длинной страницы.

Чтобы сделать такую ссылку, нужно добавить идентификатор элементу и сослаться на него в ссылке с помощью решётки, диеза:

<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы