Используя 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();
});
});
// автоматически создает список оглавления
$("#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();
});
});
Работу скрипта можно оценить, просмотрев пример.
ПРИМЕР
Здравствуйте, извините за глупый вопрос, перед ]]>?
ОтветитьУдалитьДа, а если добавлять в уже существующий блок скриптов, то можно и без оболочки $(function(){ ... }). Сразу разместить внутри той, которая уже есть.
УдалитьПодробнее есть тут - http://www.magentawave.com/2012/11/how-i-sped-up-my-blog.html