Урок 5.2: Создание ссылки на якорь

При больших размерах страницы - т.е. когда на странице очень много текста, возникает необходимость создания ссылок на якоря.

В языке HTML эта необходимость реализована с помощью тега гиперссылок <a>. Только вместо адреса, куда ведет ссылка, указывается id (идентификационный номер) со стоящим перед ним знаком решетки (<a href="#id">Текст ссылки на якорь</a>).

Еще один маленький момент: при ссылки на якорь на странице должен быть установлен этот якорь. Для этого необходимо в нужном теге указать атрибут id (например id="yakor"). Значение атрибута id может состоять из цифр и латинских букв.

Пример создания ссылки на якорь.

<html>  <head>   <title>Создание ссылки на якорь</title>  </head>  <body>   <h2>Содержание</h2>   <p><a href="#1">Раздел 1</a></p>   <p><a href="#2">Раздел 2</a></p>   <p><a href="#3">Раздел 3</a></p>   <p><a href="#4">Раздел 4</a></p>   <p><a href="#5">Раздел 5</a></p>    <h3 id="1">Раздел 1</h3>   <p>Текст раздела 1</p>   <h3 id="2">Раздел 2</h3>   <p>Текст раздела 2</p>   <h3 id="3">Раздел 3</h3>   <p>Текст раздела 3</p>   <h3 id="4">Раздел 4</h3>   <p>Текст раздела 4</p>   <h3 id="5">Раздел 5</h3>   <p>Текст раздела 5</p>  </body> </html>

Результат создания ссылки на якорь

Ссылки на якорь

Ссылка на якорь - после нажатия на ссылку

Как видно из примера при нажатии на ссылку ведущую на якорь страница прокручивается до нужного якоря.


Еще одна возможность - это совмещения гиперссылки с ссылкой на якорь. Для этого необходимо в конце гиперссылки добавить знак решетки и идентификатор якоря. Например href="/http://in-sites.ru/html/spravochnik-html#html"

<< Создание ссылки | Перечень уроков | Атрибуты ссылок >>