js如何实现文章目录索引导航

小编这次要给大家分享的是js如何实现文章目录索引导航，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

成都创新互联为客户提供专业的成都网站设计、成都网站制作、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、手机网站开发等网站方面业务。

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供成都网站建设、网站建设、网站策划、网页设计、空间域名、网络空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

什么叫TOC呢？table of content。

具体什么效果呢？可以随便找个hexo博客中体验一下，例如这个。

好了，实现它有2个要点：

点目录跳到段落：通过标签的锚点实现，其原理在这里。
滚动触发目录变换：通过js监听滚动事件，判定当前所处段落，令对应目录项高亮

实现分析

#toc是左侧的目录，#content是右侧的文章正文。

 

  


  
 
 

  
第1章节
  

  
第2章节
  

  
第3章节
  

  
第4章节
  

 

利用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数组中，其顺序就是文章自上而下的阅读顺序，按照其

中的段落标题建出#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事件进行监听，每次滚动就判断最近一个滚出屏幕顶部的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("h2").text())
     }
    })

后续

这里目录的生成是在前端JS里根据正文的锚点动态生成的，为了SEO可以在后端提交文章正文时匹配出这些锚点，直接保存为目录。

完整代码

 
 
 
 


 

  


  
 
 

  
第1章节
  

  
第2章节
  

  
第3章节
  

  
第4章节
  

 

看完这篇关于js如何实现文章目录索引导航的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。


网站栏目：js如何实现文章目录索引导航
文章源于：http://mswzjz.cn/article/iijpes.html