• Главная
>
• JQuery

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

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

Какие преимущества навигации

• Навигация по статье помогает пользователям понимать структуру контента и быстрее находить нужную информацию. 
• Содержание позволяет пользователям перейти непосредственно к разделу, который их интересует, минуя менее релевантный контент. Это делает чтение эффективнее и продуктивнее.
• Помимо пользовательского опыта, навигация помогает поисковым системам лучше понять структуру вашего содержимого. Якорные ссылки с текстом, соответствующим заголовкам вашей статьи, могут улучшить поисковую оптимизацию вашего сайта.
• Когда пользователи легко находят источник информации, они могут провести больше времени на вашем сайте, что положительно сказывается на вовлеченности и статистике просмотров страниц.

Как создать навигацию по статье на jQuery

Список якорных ссылок будет выводится в начале каждой статьи. Все что нужно для работы скрипта, указать в каком контейнере находится сам текст статьи. В данном примере подразумевается то, что текст статьи выводится в контейнере с id #content

$(document).ready(function(){
        // Формирование содержимого статьи
        var contents = $('<ul id="tableOfContents">'); // создание списка

        // Создание и добавление заголовка содержимого
        var contentsHeader = $("<p>").text("Содержание статьи");
        contents.append(contentsHeader);

        $('#content').find('h2, h3').each(function(index) {
            var element = $(this);
            var id = 'section-' + index; // уникальный ID для якорной ссылки

            // Добавление ID к заголовку
            element.attr('id', id);

            // Создание якорной ссылки и добавление ее в элемент списка li
            var link = $('<a>').attr('href', '#' + id).text(element.text());
            var listItem = $("<li>"); // создаем элемент списка
            listItem.append(link); // добавляем в элемент списка ссылку
            contents.append(listItem); // добавляем элемент списка в общее содержимое
        });

        // Вставка содержимого в начало статьи
        $('#content').prepend(contents);

        // Добавление обработчика событий для плавной прокрутки
        contents.find('a').on('click', function(event){
            event.preventDefault();
            var targetOffset = $($.attr(this, 'href')).offset().top;
            $('html, body').animate({
                scrollTop: targetOffset - 50 // Скроллит немного выше указанного места
            }, 800);
        });
    });

Как работает скрипт 

Формирование списка: Создается элемент списка ul с идентификатором tableOfContents. 

Поиск заголовков: Скрипт перебирает все элементы h2, h3 внутри контейнера #content. 

Для каждого заголовка выполняются следующие действия:

• Назначается уникальный идентификатор id, составленный из слова "section-" и индекса элемента.
• Создается якорная ссылка, в которой href равен # плюс уникальный id, а текст ссылки — это текст заголовка.
• Этот элемент добавляется в списка li, который в свою очередь добавляется в основной список.

Добавление навигации в статью: После того, как все элементы списка собраны, основной список вставляется в начало контейнера #content.

В конце добавляется обработчик событий click для всех ссылок в списке навигации. При клике пользователь плавно перемещается к соответствующему разделу.

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