Автоматическое оглавление на jQuery

Обновлено: 23.12.2020 6954

Статья заметка о том, как можно сделать скрипт для автоматического формирования содержимого статьи на сайте.

Автоматическая генерация содержания статьи на jQuery с плавной прокруткой к якорю

Время прочтения:

Предлагаю JS-скрипт, который:

  • Автоматически формирует содержимое статьи;
  • Исправляет проблему с якорными ссылками, при использовании относительных ссылок;
  • Исправляет проблему якорных ссылок при верхнем фиксированном меню (скрывалось начало);
  • Удаляет двоеточие в конце заголовка при выводе в списке оглавления;
  • Делает плавную прокрутку, до местоположения якорного заголовка.

Для корректной работы скрипта, необходимо подключит библиотеку JQuery.

Скрипт оглавления на JQuery

Сам скрипт с пояснениями (комментарии JavaScript):

<script>
/*Лучше делать отложенную загрузку, поисковики, не будут воспринимать навигацию как переспам - повторные вхождения заголовков.*/ 
$(document).ready(function(){
/*Делаем плавную прокрутку при клике на якорную ссылку:*/
 $("body").on('click', '[href*="#"]', function(e){
 /*body > nav.menu - указываем на фиксированный блок меню.*/ 
 var fixed_offset = $("body > nav.menu").outerHeight(true);
 /*fixed_offset = 100; - так можно указать фиксированную высоту напрямую*/
 $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
 e.preventDefault();
 });
/*Делаем плавную прокрутку при клике на якорную ссылку:*/
 $(function() { 
 var curlvl;
 /*startlvl = 2; - для Blogger*/
 var startlvl = 0;
 var prevlvl = startlvl;
 /*toc - наш контейнер*/
 var lst = $("#toc");
 /*решил вынести заголовок Содержания сюда - и управлять проще и индексироваться не будет.*/
 var tmp2 = $("<h3>Оглавление</h3>");
 lst.append(tmp2);
 /*текущий полный URL - актуально если у вас не работают якорные ссылки из-за тега base, задающий относительность урлов.*/
 var href1 = window.location.href;
 /*вырезаем якоря в URL - так решил проблему зацикливания на якорях. пример зацикливания: site.ru/ ... /page#title1#title2 ...*/
 var href2 = href1.replace(window.location.hash, "");
 if(typeof lst !== "undefined") {
 /*.text_read h1, .text_read h2, .text_read h3, .text_read h4 - указываете свой путь к заголовкам.*/
 $(".text_read h1, .text_read h2, .text_read h3, .text_read h4").each(function(i) {
 var current = $(this);
 current.attr("id", "title" + i); 
 for(curlvl = parseInt(current.prop("tagName").substring(1)); curlvl > prevlvl; prevlvl++) {
 var tmp = $("<ul></ul>");
 if(prevlvl == startlvl)
 lst.append(tmp);
 else {
 var last_li = $("#toc li").last();
 last_li.append(tmp);
 }
 if (curlvl > prevlvl + 1)
 tmp.append("<li style=\"list-style-type: none\"></li>");
 lst = tmp;
 }
 while(curlvl < prevlvl) {
 lst = lst.parent().parent();
 prevlvl--;
 }
/*убираем двоеточие в конце заголовка для ссылки в оглавлении:*/
curder=current.html();
 if (curder.charAt(curder.length - 1) == ':') {
 curder = curder.substr(0, curder.length - 1);
 }

 /*href2 - исправляет проблему с тегом base и зацикливанием якорей; itemprop='url' - элемент микроразметки; curder - анкор без двоеточия в конце подстроки:*/
 lst.append("<li><a id='link" + i + "' itemprop='url' href='" + href2 + "#title" + i + "' title='" + current.html() + "'>" + curder + "</a></li>");
 });
 }
 });});
</script>

Код вывода оглавления

Результаты работы скрипта необходимо вывести в контейнере.

Для этого в нужном месте добавим по примеру следующее:

<!--Контейнер который выводи содержание статьи -->
<div id="toc" itemscope itemtype='https://www.schema.org/SiteNavigationElement'></div>
...
<!--Контейнер самой статьи -->
<div itemprop="articleBody" class="text_read">
 ...тело статьи...
</div>

Контейнер с идентификатором id="toc" лучше не вкладывать в контейнер с самой статьей, в моем случае с class="text_read".

Также на случай обнаружения поисковыми ботами навигации, сразу обозначим её через словарь микроразметки: itemscope itemtype='https://www.schema.org/SiteNavigationElement'.

Также вы можете посмотреть код моего сайта, чтобы детально разобраться на живом примере.

Связаться в Telegram

Рейтинг: 5/5
6 голосов

Следующие страницы вас также могут заинтересовать:

Обновлено: 23.12.2020