jQuery实现为文章自动生成文章导航,解决固定顶部导航偏移问题

avatar 2020年09月10日22:15:47 6 2184 views
博主分享免费Java教学视频,B站账号:Java刘哥

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

我们可以通过 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 = "&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if (tagName === 'H3') {
                spaceNum = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if (tagName === 'H4') {
                spaceNum = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if (tagName === 'H5') {
                spaceNum = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if (tagName === 'H6') {
                spaceNum = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            // 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 可以去掉。

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0