纯js实现文章导航目录

我们经常看到一些内容较多的文章都有一个目录导航,点击导航会跳转到响应的位置,页面滚动时相应位置的导航也会呈现选中状态非常的方便,这里使用js做一个简单的实现

实现思路

  • 为文章中的标题标签h1、h2添加不同的id(举例只取h1、h2其他同理)
  • 正则获取文章内容中的h1、h2标签
  • 使用将获取到的标签转换成li、a标签,id转换为href属性
  • 将转换后的标签插入需要显示目录的位置
  • 编写监测页面滚动监听事件
  • 编写描点点击事件

为文章中的标题标签添加不同的id

需要保证页面中的id不重复,这里使用了循环赋值的方法
遍历h1 h2重设id,获取文章内容中的标题标签,使用将获取到的标签转换成li、a标签,id转换为href属性

var list = [], idList = []
('.j-article-conn h1,.j-article-conn h2').each(function (i) {(this).attr('id', i);
    idList.push(i)
    list.push('<li class="' + ((this).get(0).tagName == 'H2' ? "pl" : "") + '"><a href="#' + i + '">' +(this).text() + '</a></li>')
});

这里的判断为h2标签添加了不同的样式便于区分

将转换后的标签插入需要显示目录的位置

$('.j-titleList').prepend(a)

编写监测页面滚动监听事件

//页面滚动为导航添加样式
(window).scroll(function () {
    for (let i = 0; i(window).scrollTop() > ('#' + idList[i]).offset().top - 100 ||(this).scrollTop() + (this).height() ==(document).height()) {
            ('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');('.j-bj').css('top', i * 44)
        }
    }
});

编写描点点击事件

为点击的目录添加选中样式,添加平滑滚动动画,css样式需要自己定义

let root =('html, body');
('.j-titleList li a').on("click", function () {root.animate({
        scrollTop: (.attr(this, 'href')).offset().top - 65
    }, 400);
    return false
});

效果预览: https://blog.qianxiaoduan.com/archives/200

永久链接: https://blog.qianxiaoduan.com/archives/200

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注