Ссылка с якорем в HTML

Ссылка с якорем

Наверняка вы натыкались в Интернете на страницы, в начале которых имелось краткое содержание. И достаточно было кликнуть на определённый пункт и страница просто проматывалась до нужного места без перезагрузки. Это происходит благодаря ссылкам с якорями.

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

Обязательным элементом ссылки с якорем является символ #. А за этим символом, в свою очередь, следует идентификатор. Для создания идентификатора используется атрибут id. Он может указываться у любого тега.

Однако, можно указать адрес, в котором будет один лишь якорь. Приведем пример.

<a href="#glava1">Глава 1</a>

Если нажать на такую ссылку со страницы браузера, то он осуществит поиск на этой же странице элемента, где будет задан атрибут id с указанным значением glava1. После чего страница будет прокручена до этого элемента без повторного открытия.

Также допустимо применение якоря в абсолютных адресах. В таких случаях браузер сперва откроет необходимую страницу, а после чего пролистает ее до соответствующего элемента.

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание

  • создайте страницу с именем check-anchor.html, которая по высоте будет занимать три экрана;
  • добавьте в середину её содержимого якорь. Например:
    <h2 id="glava1">Глава 1</h2>
  • откройте её в браузере с параметром #glava1. Например:
    /check-anchor.html#glava1
  • убедитесь, что страница автоматически пролисталась до нужного места