这是我参与「第四届青训营」笔记创作活动的的第31天

1、目的

仿掘金官网文章详情页制作无限滚动文章页面

2、实现

拿到文章详情页后可以从中抽离出所有的目录标签即h1，h2，h3....

jump(index) {
      let jump = document.querySelectorAll("h1,h2,h3,h4,h5,h6")
      // 获取需要滚动的距离

将获取的title存储到navList数组中

this.navList = Array.from(title)

然后遍历navList数组，将每个title存储为item.name

this.navList.forEach((item) => {
        //遍历navList数组，将每个title存储为item.name
        item.name = item.innerHTML
      })

截取下标，获取title的级别

el.lev = "lev" + el.localName.substring(index + 1, el.localName.length)

但是当我们通过鼠标滚轮滚动时,目录高亮内容并不会跟着页面内容变化,接下来就是解决这个问题

我们要通过当前页面距离顶部的距离和h标签距离顶部的距离相比较,来判断该高亮哪一个目录内容**

获取当前页面距离顶部的距离

scroll代表滚动条距离页面顶部距离

window.addEventListener("scroll", this.dataScroll)

接下来要做的就是将这些h标签转化为ul>li的形式。简而言之就是先进后出的数据格式，

点击到每个目录就会跳到那个目录的标题处（这里使用的是瞄点定位）从lev1到lev5分别添加不同到样式这里通过匹配id来获取对应的h标签在页面中的位置,再通过srcollTo到达该位置.

这里有两种方法可以实现需求分别是 “a标签锚点” 和 “window.scrollTo”，这里我用的方法是后者，因为a标签锚点虽然可以实现点击后滚动到相应内容，但也会在地址栏中显示锚点名字非常的不美观，并且没有滚动动画