はてなブログの目次を自動生成するjQueryのコード（保存版）

たぶん永久保存版です。

他のサイトのコードを使いまわしたりしていたのですが、どうも細部に余計なコードが入っていたりしたので修正しました。

たぶんこれでつぶしがきくんじゃないでしょうか。

はてなブログの目次を自動生成するコード

$(function() {
    var list = "";
    var $h2 = $('.entry-content h2');
    var className = "";
    var h2_count = 0;
    var h3_count = 0;
    $(".page-entry .entry-content h2, h3").not('.guest-footer-content h3').each(function(i) {
        var idName = "section" + i;
        var count = 0;
        if ($(this).is('h2')) {
            h2_count++;
            h3_count = 0;
            count = h2_count;
            className = "h2-section"
        } else if ($(this).is('h3')) {
            h3_count++;
            count = '' + h2_count + '-' + h3_count;
            className = "h3-section"
        }
        $(this).attr("id", idName);
        list += '<li class = ' + className + '><span>' + count + '.</span><a href="#' + idName + '">' + $(this).text() + '</a></li>'
    });
    if ($(".page-entry .entry-content h2").length >= 2) {
        $("<div class='section-list'><ol>" + list + "</ol></div>").insertBefore($h2.eq(0))
    }
    $('.section-list a').on("click", function() {
        const target = $(this.hash);
        const headerHeight = target.outerHeight() / 2;
        const topOffset = target.offset().top;
        const scrollTo = topOffset - headerHeight;
        $('html,body').animate({
            scrollTop: scrollTo
        }, 50);
        return false
    })
})(jQuery);

ポイント

jqueryをつかっています。んで記事内のh3を取得するわけなんですが、はてなブログの場合は関連記事の見出しがh3になっているのでそれを拾わないようにしないといけません。

上記コードは対応済みです。

あとは目次のリンクをクリックしたときにスクロールアニメーションのコードも書いてあります。

insertBefore($h2.eq(0))

insertBeforeで最初のh2の前に目次がくるようにしてます。

他のサイトだとなぜかここが余計な要素を追加してそこにappendToするみたいになっていたので、余計な要素を書かないようにしてます。