文章导航功能是很多博客系统都有的一个功能，个人觉得还是很有必要的，以前没有意识到，我的博客最近才加上这个功能。

我们可以通过 JavaScript 实现自动生成文章文档，通过获取文章的dom节点内容，然后遍历，找到里面的 h2,h3,h4等标签，然后添加锚点，同时拼接导航元素。

本文代码里同时会解决如本站的导航固定的，然后锚点跳转会位置不准，差120px(顶部导航高度)的问题。

1 效果图

示例页面

2 完整代码

2.1 HTML 代码

文章内容

<div class="single-content" id="postContentDiv" th:utext="${post.content}"></div>

文章导航

<aside class="widget" id="postNavigationAside">
    <h3 class="widget-title">
        <span class="title-i"></span>文章导航</h3>
    <div class="textwidget" id="postNavigation"></div>
</aside>

css样式我觉得就没有必要了，因为大家不可能直接用我这个样式的吧，主要还是 js 的代码

2.2 JS代码

注意需要在代码前引入 jQuery 库

postContentDiv 是文章内容所在的 div 的 id

//显示正文的导航标题锚点
$(document).ready(function (e) {
    let html = '';
    $("#postContentDiv").children().each(function (index, element) {
        const tagName = $(this).get(0).tagName;
        if (tagName.substr(0, 1).toUpperCase() === "H") {
            console.log(tagName);
            const contentH = $(this).html();//获取内容
            const markid = "mark-" + tagName + "-" + index.toString();
            $(this).attr("id", markid);//为当前h标签设置id
            let spaceNum = "";
            if (tagName === 'H1') {
                spaceNum = "";
            } else if (tagName === 'H2') {
                spaceNum = "    ";
            } else if (tagName === 'H3') {
                spaceNum = "      ";
            } else if (tagName === 'H4') {
                spaceNum = "          ";
            } else if (tagName === 'H5') {
                spaceNum = "              ";
            } else if (tagName === 'H6') {
                spaceNum = "                  ";
            }
            // html += "<a href='#" + markid + "'>" + spaceNum + contentH + "</a>";
            html += "<a href='javascript:void(0)' class='navItems'  navTo='" + markid + "'>" + spaceNum + contentH + "</a>";
        }
    });

    if (html != null && html != '') {
        $("#postNavigation").append(html);
        $('#postNavigationAside').show();
    }
    console.log("标题导航锚点完成！");
});


$(document).on('click', '.navItems', function () {
    const navto = $(this).attr('navto');
    if (navto != "#") {
        const $div = $('#' + navto);
        const top = $div.offset().top || 0;
        $('html,body').animate({
            'scroll-top': top - 120
        }, 500);
    } else {
        $('html,body').animate({
            'scroll-top': 0
        }, 500);

    }
});

下面这个方法解决了顶部菜单固定问题，如果你的菜单不是固定的， - 120 可以去掉。