Система якорей: создание навигации по странице с id и ссылками

Что такое якоря и зачем они нужны? 🔗

Представь: ты читаешь длинную статью или лендинг, и хочешь быстро перейти к определённому разделу. Прокручивать вручную? Неэффективно! Якоря (anchors) — это специальные метки внутри страницы, которые позволяют мгновенно перемещаться по её содержимому.

👉 Примеры использования:
- Навигация по разделам статьи (оглавление).
- Быстрые ссылки в меню («Контакты», «О нас»).
- Кнопки «Вверх» или «На главную».

Как работают якоря?

Якоря используют два ключевых элемента HTML:

Якорная ссылка (<a href="#id">) – кликабельный элемент, который ведёт к нужному месту.
Целевой блок (<div id="id">) – раздел страницы, куда происходит переход.

<!-- Пример: навигация -->
<nav>
  <a href="#intro">Введение</a>
  <a href="#features">Особенности</a>
</nav>

<!-- Целевые блоки -->
<section id="intro">
  <h2>Введение</h2>
  <p>Здесь начинается наша история...</p>
</section>

<section id="features">
  <h2>Особенности</h2>
  <p>А здесь — самое интересное!</p>
</section>

Где можно размещать якорные ссылки?

Якоря работают в любом месте страницы и даже между страницами!

1. Внутри одной страницы

Классический вариант — меню с быстрыми переходами:

<a href="#contacts">Контакты</a>
<!-- ... -->
<footer id="contacts">
  <p>Наши контакты: email@example.com</p>
</footer>

2. Между разными страницами

Можно ссылаться на конкретный раздел другого документа:

<a href="about.html#team">Наша команда</a>

Продвинутые трюки с якорями 🎩

Плавная прокрутка

Добавь CSS, чтобы переход был плавным, а не резким:

html {
  scroll-behavior: smooth;
}

Якорь без смещения (для фиксированных шапок)

Если у тестя фиксированный header, якорь может «прятаться» под ним. Исправь это с помощью scroll-padding-top:

html {
  scroll-padding-top: 70px; /* Высота шапки */
}

Частые ошибки и как их избежать 🚨

❌ Опечатка в id
Ссылка href="#contacts" не сработает, если id="contact" (без s).

❌ Повторяющиеся id
id должен быть уникальным на странице!

❌ Невидимый якорь
Если целевой блок пуст (<div id="section"></div>), браузер может не понять, куда скроллить.

Практика: создаём навигацию по странице

Шаг 1. Размечаем структуру

<nav>
  <a href="#chapter1">Глава 1</a>
  <a href="#chapter2">Глава 2</a>
</nav>

<article id="chapter1">
  <h2>Первая глава</h2>
  <p>Содержание...</p>
</article>

<article id="chapter2">
  <h2>Вторая глава</h2>
  <p>Ещё больше контента!</p>
</article>

Шаг 2. Добавляем плавность

html {
  scroll-behavior: smooth;
}

Итоги

✅ Якоря — это быстрые переходы внутри страницы.
✅ Работают через id и <a href="#...">.
✅ Можно делать плавными и учитывать фиксированные шапки.
✅ Проверяй уникальность id и корректность ссылок!

Теперь твои страницы станут удобнее — пользователи скажут тебе спасибо! 😉