文章標題列表滾動變色和跳轉效果實現

爲何作

最近在實習的過程當中接到了這樣一個需求，網頁展現一篇文章的時候，右側須要有一個文章的標題列表，同時文章在滾動的時候滾動到對應標題的時候對應標題須要變色，同時點擊對應標題能夠跳轉到對應標題的位置，這裏用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