js實現文章目錄索引導航(table of content)

阿新 • • 發佈：2020-05-12

什麼叫TOC呢？table of content。

具體什麼效果呢？可以隨便找個hexo部落格中體驗一下，例如這個。

好了，實現它有2個要點：

點目錄跳到段落：通過<a>標籤的錨點實現，其原理在這裡。
滾動觸發目錄變換：通過js監聽滾動事件，判定當前所處段落，令對應目錄項高亮。
我寫了一個簡單的demo來演示這個效果，

原始碼地址：https://github.com/owenliang/js-toc

線上體驗：http://owenliang.github.io/js-toc

實現分析

#toc是左側的目錄，#content是右側的文章正文。

 <div id="toc">
  <ul>

  </ul>
 </div>
 <div id="content">
  <a name="seg-1" class="seg-begin"><h1>第1章節</h1></a>
  <div class="seg-content"></div>
  <a name="seg-2" class="seg-begin"><h1>第2章節</h1></a>
  <div class="seg-content"></div>
  <a name="seg-3" class="seg-begin"><h1>第3章節</h1></a>
  <div class="seg-content"></div>
  <a name="seg-4" class="seg-begin"><h1>第4章節</h1></a>
  <div class="seg-content"></div>
 </div>

利用css控制#toc靠左，當前目錄高亮為紅色，正文則靠右填滿螢幕：

  #toc {
   width: 200px;
   position: fixed;
   left: 0;
   top: 0;
  }
  #toc a.active {
   color: red;
  }
  #content {
   margin-left: 200px;
  }

在上面的靜態頁面中，目錄暫時為空，因為需要用JS動態生成。

正文中需要人工埋點段落起始標識，也就是a.seg-begin這樣的錨點，每個段落的錨點name唯一，而錨點之後緊隨段落的內容。

在JS中，我首先按錨點的出現次序收集所有的a.seg-begin儲存到segs陣列中，其順序就是文章自上而下的閱讀順序，按照其<h1>中的段落標題建出#toc中的<ul>列表：

    var segs = [];
    $(".seg-begin").each(function (idx,node) {
     segs.push(node)
     var link = $("<a></a>").attr("href","#" + $(node).attr("name")).html($(node).children("h1").html())
     if (!idx) {
      link.addClass("active")
     }
     var row = $("<li></li>").append(link)
     $("#toc ul").append(row)
    })

然後繫結瀏覽器的scroll事件進行監聽，每次滾動就判斷最近一個滾出螢幕頂部的a.seg-begin節點，它就是當前正在閱讀的段落：

$(window).bind("scroll",function() {
     var scrollTop = $(this).scrollTop()
     var topSeg = null
     for (var idx in segs) {
      var seg = segs[idx]
      if (seg.offsetTop > scrollTop) {
       continue
      }
      if (!topSeg) {
       topSeg = seg
      } else if (seg.offsetTop >= topSeg.offsetTop) {
       topSeg = seg
      }
     }
     if (topSeg) {
      $("#toc a").removeClass("active")
      var link = "#" + $(topSeg).attr("name")
      console.log('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]')
      $('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]').addClass("active")
      // console.log($(topSeg).children("h1").text())
     }
    })

後續

這裡目錄的生成是在前端JS里根據正文的錨點動態生成的，為了SEO可以在後端提交文章正文時匹配出這些錨點，直接儲存為目錄。

完整程式碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
  * {
   margin: 0;
   padding: 0;
   word-break: break-all;
  }
  #toc {
   width: 200px;
   position: fixed;
   left: 0;
   top: 0;
  }
  #toc a.active {
   color: red;
  }
  #content {
   margin-left: 200px;
  }
 </style>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script>
  $(document).ready(function () {
   for (var i = 0; i < 50; ++i) {
    $(".seg-content").append("<p>一個段落而已</p>")
   }

   (function () {
    var segs = [];
    $(".seg-begin").each(function (idx,node) {
     segs.push(node)

     var link = $("<a></a>").attr("href","#" + $(node).attr("name")).html($(node).children("h1").html())
     if (!idx) {
      link.addClass("active")
     }
     var row = $("<li></li>").append(link)
     $("#toc ul").append(row)
    })

    $(window).bind("scroll",function() {
     var scrollTop = $(this).scrollTop()

     var topSeg = null
     for (var idx in segs) {
      var seg = segs[idx]
      if (seg.offsetTop > scrollTop) {
       continue
      }
      if (!topSeg) {
       topSeg = seg
      } else if (seg.offsetTop >= topSeg.offsetTop) {
       topSeg = seg
      }
     }
     if (topSeg) {
      $("#toc a").removeClass("active")

      var link = "#" + $(topSeg).attr("name")
      console.log('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]')
      $('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]').addClass("active")
      // console.log($(topSeg).children("h1").text())
     }
    })
   })()
  })
 </script>
</head>
<body>
 <div id="toc">
  <ul>

  </ul>
 </div>
 <div id="content">
  <a name="seg-1" class="seg-begin"><h1>第1章節</h1></a>
  <div class="seg-content"></div>
  <a name="seg-2" class="seg-begin"><h1>第2章節</h1></a>
  <div class="seg-content"></div>
  <a name="seg-3" class="seg-begin"><h1>第3章節</h1></a>
  <div class="seg-content"></div>
  <a name="seg-4" class="seg-begin"><h1>第4章節</h1></a>
  <div class="seg-content"></div>
 </div>
</body>
</html>

另外，這裡沒有實現巢狀的目錄結構，我特意觀察了一下hexo的做法，是通過h1,h2,h3來表達層級的，這樣在each遍歷生成目錄的時候可以基於這個資訊完成巢狀層級的標記，問題迎刃而解。