Автоматическое оглавление статьи из подзаголовков

Публикации на сайте или в блоге могут быть весьма объемными и содержать разнонаправленный контент, посвященный нескольким темам одновременно. Подобные статьи не редко приходится делить на тематические разделы, отдельно озаглавливая каждый из них. Для удобства посетителя, в таких публикациях можно составить содержание из подзаголовков разделов.
  Используя jQuery можно автоматически создать оглавление статьи в виде дополнительного меню, без необходимости прописывать вручную код для каждой публикации.

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

  Чтобы избавиться от резких скачков страницы при переходе от меню к выбранному разделу, дополнительно можно добавить скрипт плавной прокрутки к якорю. Окончательный вариант кода будет выглядеть так:
$(function(){
// автоматически создает список оглавления
 $("#menu").before('<h3>Содержание</h3>')
  $(".post-body h2, .post-body h3").each(function(i) { // h2 и h3 - теги используемые для подзаголовков, можно указать любые
  var current = $(this),
  text = current.text();
  current.attr("id", "section" + i);
  $("#menu").append("<li><a href='#section" + i + "' title='" + text + "'>" + current.html() + "</a></li>");
 });
// добавляет прокрутку к якорю
 $('#menu a[href^="#"]').on('click', function(e){
  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - 100}, 1000);
 e.preventDefault();
 });
});

  Работу скрипта можно оценить, просмотрев пример.
ПРИМЕР


2 комментария:

  1. Здравствуйте, извините за глупый вопрос, перед ]]>?

    ОтветитьУдалить
    Ответы
    1. Да, а если добавлять в уже существующий блок скриптов, то можно и без оболочки $(function(){ ... }). Сразу разместить внутри той, которая уже есть.
      Подробнее есть тут - http://www.magentawave.com/2012/11/how-i-sped-up-my-blog.html

      Удалить

Следующее Предыдущее

BestProject