記事に目次を追加するJS

目的

muragonのカスタマイズ。
WordPressのプラグインTable of Contents Plusと同様に、記事の見出し(<h2><h4>)から目次を作成する。
目次をクリックで見出しに滑らかに移動する。

Javascript

$(function() {
$(".entry-contents .entry-body-inner").each(function(i) {

var html = '';
$("h2,h3,h4",this).each(function(j) {

/* 見出しにアンカー設定 */
$(this).attr("id","t" + i + j);

/* 目次エスケープコード変換 */
var txt = $(this).text();
txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
html += '<li class="toc-' + $(this)[0].nodeName + '"><a href="#t' + i + j + '">' + txt + '</a></li>';
});

/* HTML出力 */
if(html != '') {
html = '<div class="toc"><p class="title">目次</p><ul>' + html + '</ul></div>';
$(".entry-contents .entry-body-inner").eq(i).prepend(html);
}
});

/* スクロールして見出し */
$(".toc a").click(function() {
var no = $(this).attr("href");
var off = $(no).offset().top;
$("body,html").animate({
scrollTop: off
}, 500);
return false;
});
});

CSS

.toc .title {
font-weight : bold ;
}

.toc .toc-H2 {
margin-left : 0em;
}

.toc .toc-H3 {
margin-left : 1em;
}

.toc .toc-H4 {
margin-left : 2em;
}