文章标题列表滚动变色和跳转效果实现

为何作

最近在实习的过程当中接到了这样一个需求，网页展现一篇文章的时候，右侧须要有一个文章的标题列表，同时文章在滚动的时候滚动到对应标题的时候对应标题须要变色，同时点击对应标题能够跳转到对应标题的位置，这里用js原生实现了一下，由于本人水平缘由，有不少瑕疵，仅供参考。

用draw.io简单示意一下

获取标题

getTitle: function (markdown) {
    let template = Array.from(markdown.querySelectorAll('h1,h2,h3,h4,h5,h6'));//获取页面上全部的标题
    let length = template.length;
    for (let i = 0; i < length; i++) {
      template[i].setAttribute('id', `${template[i].tagName}${i}`);
    }//给标题添加id，为了以后添加锚点准备
    return template;
  }
复制代码

建立文章列表和添加锚点

createlist(data) {//传入上一个函数获取的标题列表
    let ul = document.createElement('ul');
    for (let j of data) {
      let li = document.createElement('li');
      let a = document.createElement('a');
      a.appendChild(document.createTextNode(`${j.innerText}`));//将标题内容复制到a标签上面
      a.setAttribute('href', `#${j.id}`);//添加锚点
      li.appendChild(a);
      if (j.tagName === 'H2') li.style.paddingLeft = '15px';//不一样级的列表添加缩进
      if (j.tagName === 'H3') li.style.paddingLeft = '30px';
      ul.appendChild(li);
    }
    return ul;
  }
复制代码

滚动变色逻辑

scroll(page, list) {
    let article = page.querySelector('.page-article');
    let h = Array.from(article.querySelectorAll('h1,h2,h3,h4,h5,h6'));//获取标题列表，为了获取标题的位置
    let alist = Array.from(list.querySelectorAll('a'));//获取文章标题列表中的全部a标签
    article.onscroll = function () {
      for (let i of h) {
        let distance = i.offsetTop - article.scrollTop;
        if (distance > 0 && distance < 20) {//滚动到标题的时候
          let id = i.getAttribute('id');//获取文章的h标题的id来指定对应的a标签
          for (let j of alist) {
            j.style.color = 'black';
            let href = j.getAttribute('href');
            href = href.slice(1, href.length);//获取和id对应的锚点的a标签，这样写由于'#xxx'，须要去掉#
            if (href === id) j.style.color = 'blue';//变色
          }
        }
      }
    };
  }
复制代码

最后立个flag，争取天天写一篇文章，orz