Просмотров: 4 477

Что такое ссылка якорь в HTML и как ее сделать?

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

Ссылка якорь

Для таких больших документов нужно что-то вроде интерактивного оглавления. Чтобы при клике по нужному разделу, экран браузера пользователя сразу фокусировался на нужном месте.

Добиться такого эффекта можно с помощью языка разметки гипертекста HTML, не прибегая ни к каким дополнительным скриптам.

Для этого нужно создать так называемую ссылку якорь. Ссылка якорь – это ссылка, которая перенаправляет пользователя не на другую веб-страницу, а на какаю-то часть той веб-страницы, на которой он в данный момент находится.

Технология, по которой это можно сделать, довольно проста:

элементу, к которому необходимо выполнить переход, присваиваем атрибут id с уникальным именем (это имя можно придумать произвольно), а для ссылки, которая будет осуществлять переход,  для атрибута href, в самом конце url – адреса добавляем  через символ решетки (#) имя того id, к которому нужно выполнить переход.

Кстати, якорь является одной из составляющих структуры url – адреса.

Следующий пример показывает, как это можно сделать на практике.

<h1>Оглавление</h1>
 <p><a href="index.html#r1">Перейти к разделу 1</a></p>
 <p><a href=" index.html#r2">Перейти к разделу 2</a></p>
 <p><a href=" index.html#r3">Перейти к разделу 3</a></p>
 <p>Много, много текста. </p>
 <h2 id="r1">Раздел 1</h2>
 <p>Много, много текста.  </p>
 <h2 id="r2">Раздел 2</h2>
 <p>Много, много текста. </p>
 <h2 id="r3">Раздел 3</h2>
 <p>Много, много текста. </p>

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

И напоследок, чтобы вы были в курсе, при переходе по ссылке якорю, меняет свое действие кнопка «Назад» в браузере. Когда вы нажмете на эту кнопку, вас будет переносить не на ту веб-страницу, которую вы последний раз просматривали, а на то место веб-страницы, которое вы просматривали до того, как перешли по ссылке якорю.

Несколько книг по теме:

11198082_cover-pdf-kniga-kollektiv-avtorov-adobe-dreamweaver-cc-8383707

11608530_cover-pdf-kniga-metu-makdonald-html5

12912979_cover-pdf-kniga-k-suhov-html5-putevoditel-po-tehnologii

  • http://www.avtobllog.ru/ Сергей

    Захотел себе поставить якорь на сайт, не работает тот код который вы указали в примере. перебрасывает на неизвестную страницу, при нажатии раздела

    • admin

      Отпишите на webgyry@gmail.com, ссылку на страницу, где это должно работать, я посмотрю. Либо приложите исходные файлы.