Якоря в HTML

29 марта 2013  75041  jQuery, html, верстка, скрипты, якоря

 

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

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

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

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

<ul>
<li><a href="#zag1">Заголовок #1</a></li>
<li><a href="#zag2">Заголовок #2</a></li>
<li><a href="#zag3">Заголовок #3</a></li>
<li><a href="#zag4">Заголовок #4</a></li>
</ul>
 
 ...
 
<p><a name="zag1"></a></p>
<h3>Заголовок #1</h3>

<p><a name="zag2"></a></p>
<h3>Заголовок #2</h3>

<p><a name="zag3"></a></p>
<h3>Заголовок #3</h3>

<p><a name="zag4"></a></p>
<h3>Заголовок #4</h3>

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

<a name="якорь"></a>
<a href="#якорь">Ссылка на якорь</a>

2. Автоматическая генерация якорного меню с помощью 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 src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
            var ToC =
            "<nav role='navigation' class='table-of-contents'>" +
            "<h2>Меню:</h2>" +
            "<ul>";
            
            var newLine, el, title, link;
            
            $("article h3").each(function() {
                
                el = $(this);
                title = el.text();
                link = "#" + el.attr("id");
                
                newLine =
                "<li>" +
                "<a href='" + link + "'>" +
                title +
                "</a>" +
                "</li>";
                
                ToC += newLine;
            
                });
            
            ToC +=
            "</ul>" +
            "</nav>";
            
            $(".all-items").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;
        }
}
</style>

Пример

Редактировать в JS Bin

Использованы источники:

 

Комментарии для сайта Cackle
наверх