Якоря в HTML

29/03/2013  скрипты, html, веб-разработка, верстка, jQuery

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

Якорь ссылки

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

Можно создать якорную навигацию по размеченному тексту вручную или, используя jQuery, в автоматическом (динамическом) режиме.

Простая навигация с использованием якоря

Для создания якоря следует сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Например, я хочу в начале страницы указать ссылку на последний абзац. Перед этим абзацем ставлю якорь — <a name="text1"></a>. А в начале текста ставлю ссылку на него <a href="#text1">смотрите в тексте</a>


/// Якорь
<a name="якорь"></a>
/// Ссылка на якорь
<a href="#якорь">Ссылка на якорь</a>
/// Ссылка на якорь на другой странице
<a href="page.html#якорь">Перейти к нужной части текста</a>

Автоматическая генерация якорного меню с помощью jQuery

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

<article>
<div class="all-items">
<h3 id="zag1">Заголовок #1</h3>
<!-- текст -->
<h3 id="zag2">Заголовок #2</h3>
<!-- текст -->
<h3 id="zag3">Заголовок #3</h3>
<!-- текст -->
<h3 id="zag4">Заголовок #4</h3>
<!-- текст -->
</div>
</article>

Подключаем скрипт и стили

<script>
var newLine,el,title,link,ToC="<nav role='navigation' class='table-of-contents'><h2>Меню:</h2><ul>";$("article h3").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".all-questions").prepend(ToC);
</script>

 <style type="text/css"> 
 .table-of-contents
 {
 background: none repeat scroll 0 0 #EFEFEF;
 float: right;
 font-size: 1em;
 margin: 0 0 1em 3em;
 padding: 1em 2em;
 width: 26%;
 }
 .table-of-contents ul
 {
 padding: 0;
 }
 .table-of-contents li
 {
 list-style-position: outside;
 list-style-type: decimal;
 margin: 0 0 0.25em 0;
 }
 .table-of-contents a
 {
 text-decoration: underline;
 }
 h3:target
 {
 animation: highlight 1s ease;
 }
 @keyframes highlight
 {
 from
 {
 background: yellow;
 }
 to
 {
 background: white;
 }
 }
 li
 {
 list-style-type: none;
 }
 </style> 

Пример

Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх