Якорная ссылка | WAVIFUN.RU

Якорная ссылка

Всем начинающим программистам на HTML, так или иначе приходится создавать ссылки. Ссылки, это неотъемлемый элемент любого html-документа. На любом современном сайте вы можете увидеть огромное количество ссылок. Эти ссылки могут направлять нас как внутри сайта, по разделам и страницам, так и перенаправлять нас на другие сторонние ресурсы. На мой взгляд, если бы не было бы ссылок, то не было бы интернета, по крайней мере, такого, каким мы его знаем сейчас.

В этой статье речь пойдет о, так называемых, якорных ссылках. Что такое якорная ссылка? Представьте себе, как корабль или лодка кидает якорь для того, чтобы не отходить с места стоянки. Якорная ссылка работает примерно также. Мы заранее устанавливаем якорь в том месте, куда нам нужно будет переместиться.  Т.е. якорная ссылка, по нажатию на неё, переместить нас в то место, где установлен якорь, внутри страницы, на которой находился пользователь, т.е. новая страница не подгружается, пользователь остается на ней. Или это может быть переход в определенное место другого документа.

Далее рассмотрим пример создания якорной ссылки и ее работу. Предположим, у нас есть три раздела, по которым мы можем быстро перемещаться. Нам необходимо создать меню и три раздела.

<ul class="menu">
 <li><a href="#first">Первый раздел</a></li>
 <li><a href="#second">Второй раздел</a></li>
 <li><a href="#third">Третий раздел</a></li>
</ul>

Обратите внимание на адрес ссылки

href="#first"

Вначале стоит решетка, а потом название «first», который будет направлять в раздел с «first». Далее создаем разделы:

<ul class="menu">
 <li><a href="#first">Первый раздел</a></li>
 <li><a href="#second">Второй раздел</a></li>
 <li><a href="#third">Третий раздел</a></li>
</ul>
<a name="first"><h2>Первый раздел</h2></a>
<p>...</p>
<a name="second"><h2>Второй раздел</h2></a>
<p>...</p>
<a name="third"><h2>Третий раздел</h2></a>
<p>...</p>

Обратите внимание, что в ссылках на разделах указывается атрибут «name», a в меню используется атрибут «href».

Вот так выглядят и работают якорные ссылки.


Исходник

01.03.2017
424
0
0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии

Так вы сможете получать новые статьи первыми

Pin It on Pinterest