Якорь в HTML. Как перейти к метке на странице при нажатии по ссылке?

якорь в html. как перейти к метке на странице при нажатии по ссылке?

Что такое якорь и как его использовать?

Якорем в HTML называется специальная метка, установленная внутри страницы для облегчения навигации. Якорь является одним из способов использования гиперссылок. Проблема в том, что страницы могут быть объёмными, требующими долгой прокрутки колесиком мыши. Большинству пользователей такое взаимодействие не по душе.

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

Прежде всего нужно создать якорную метку. Ей может быть любой элемент с установленным атрибутом id. Взгляните на HTML-разметку со следующим содержимым «<div id="имя-метки"></div>». Имя метки, то есть атрибут id, должно быть уникальным для текущего документа.

Ссылка, при нажатии на которую будет выполняться переход, задается следующим образом «<a href="#имя-метки"></a>». Её атрибут href содержит имя якоря, перед которым добавляется символ решетки «#».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания двух якорей</title>
    </head>
    <body>
        <div id="top"></div>
        <a href="#bottom"><h2>Перейти вниз</h2></a>

        <!-- Переводами строк имитируем большое содержание -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>

        <a href="#top"><h2>Перейти вверх</h2></a>
        <div id="bottom"></div>
    </body>
</html>

Заметка
В HTML поведение якорей имеет одну особенность. При нажатии на связанную с ним ссылку меняется адрес текущей страницы (без её перезагрузки). Если вы осуществили переход на метку с именем test-mark, то в конец адреса текущего документа будет добавлен такой кусок «#test-mark». Более того, якоря участвуют в истории браузера. После перехода на него, нажатие кнопки «назад» не перенесет вас на предыдущую страницу. Вы переместитесь в то место, где были до нажатия ссылки, а адрес страницы примет предыдущее состояние.

Метка, указывающая на другую страницу

HTML позволяет сослаться на метку, установленную не только внутри текущей страницы, но и другой. Для этого гиперссылка должна иметь вид «<a href="адрес-страницы#имя-метки"></a>». Это привычное создание гиперссылки, но с одним лишь отличием — в конце её адреса указано имя метки, существующей на другой странице.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример ссылки на якорь другой страницы</title>
        </head>
    <body>
        <a href="another-page-address.html#some-marker"></a>
    </body>
</html>

После нажатия по такой ссылке будет загружен новый документ, а его содержимое прокручено до якоря.

Последние публикации