← Все вопросы

Как сделать ссылку на конкретное место внутри той же страницы (якорь)?

Задан 24 месяца назад295 просмотров1 ответ
4

У меня длинная страница, и хочу вверху сделать оглавление: кликаешь по пункту — и страница прокручивается к нужному разделу ниже. Видел, что это как-то делается через #, но не пойму как именно.

1 ответ

8
✓ Принятый ответ — помог автору

Это называется якорная ссылка. Делается в два шага:

  1. Дай нужному разделу уникальный id:
<h2 id="contacts">Контакты</h2>
  1. Сделай ссылку, где в href стоит # и это имя:
<a href="#contacts">Перейти к контактам</a>

Клик — и страница прокрутится к элементу с id="contacts".

Тонкости:

  • id должен быть уникальным на странице (никаких двух одинаковых).
  • #top сам по себе или href="#" прыгает в самый верх страницы.
  • Можно ссылаться и на чужую страницу с якорем: href="about.html#team".

Для плавной прокрутки вместо резкого прыжка добавляют в CSS scroll-behavior: smooth;, но это уже не обязательно.

Ваш ответ

, чтобы ответить на вопрос.