Якоря в HTML
Инструкции по применению, руководства по монтажу или страницы с ответами на наиболее частые вопросы, как правило, очень длинные — поэтому, использование якорей значительно облегчает навигацию по ним.
Якорь ссылки
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Смотреть пример работы.
Можно создать якорную навигацию по размеченному тексту вручную или, используя 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, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее