小編這次要給大家分享的是js如何實(shí)現(xiàn)文章目錄索引導(dǎo)航，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

成都創(chuàng)新互聯(lián)為客戶提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開(kāi)發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開(kāi)發(fā)、WEB系統(tǒng)開(kāi)發(fā)、微信二次開(kāi)發(fā)、手機(jī)網(wǎng)站開(kāi)發(fā)等網(wǎng)站方面業(yè)務(wù)。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、空間域名、網(wǎng)絡(luò)空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

什么叫TOC呢？table of content。

具體什么效果呢？可以隨便找個(gè)hexo博客中體驗(yàn)一下，例如這個(gè)。

好了，實(shí)現(xiàn)它有2個(gè)要點(diǎn)：

點(diǎn)目錄跳到段落：通過(guò)標(biāo)簽的錨點(diǎn)實(shí)現(xiàn)，其原理在這里。
滾動(dòng)觸發(fā)目錄變換：通過(guò)js監(jiān)聽(tīng)滾動(dòng)事件，判定當(dāng)前所處段落，令對(duì)應(yīng)目錄項(xiàng)高亮

實(shí)現(xiàn)分析

#toc是左側(cè)的目錄，#content是右側(cè)的文章正文。

 

  


  
 
 

  
第1章節(jié)
  

  
第2章節(jié)
  

  
第3章節(jié)
  

  
第4章節(jié)
  

 

利用css控制#toc靠左，當(dāng)前目錄高亮為紅色，正文則靠右填滿屏幕：

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

在上面的靜態(tài)頁(yè)面中，目錄暫時(shí)為空，因?yàn)樾枰肑S動(dòng)態(tài)生成。

正文中需要人工埋點(diǎn)段落起始標(biāo)識(shí)，也就是a.seg-begin這樣的錨點(diǎn)，每個(gè)段落的錨點(diǎn)name唯一，而錨點(diǎn)之后緊隨段落的內(nèi)容。

在JS中，我首先按錨點(diǎn)的出現(xiàn)次序收集所有的a.seg-begin保存到segs數(shù)組中，其順序就是文章自上而下的閱讀順序，按照其

中的段落標(biāo)題建出#toc中的

列表：

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

然后綁定瀏覽器的scroll事件進(jìn)行監(jiān)聽(tīng)，每次滾動(dòng)就判斷最近一個(gè)滾出屏幕頂部的a.seg-begin節(jié)點(diǎn)，它就是當(dāng)前正在閱讀的段落：

$(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("h2").text())
     }
    })

后續(xù)

這里目錄的生成是在前端JS里根據(jù)正文的錨點(diǎn)動(dòng)態(tài)生成的，為了SEO可以在后端提交文章正文時(shí)匹配出這些錨點(diǎn)，直接保存為目錄。

完整代碼

 
 
 
 


 

  


  
 
 

  
第1章節(jié)
  

  
第2章節(jié)
  

  
第3章節(jié)
  

  
第4章節(jié)
  

 

看完這篇關(guān)于js如何實(shí)現(xiàn)文章目錄索引導(dǎo)航的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話，可以把它分享出去給更多人看到。


文章名稱：js如何實(shí)現(xiàn)文章目錄索引導(dǎo)航
文章源于：http://weahome.cn/article/iijpes.html