js实现文章目录索引导航(table of content)

什么叫TOC呢?table of content。

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

好了,实现它有2个要点:

点目录跳到段落:通过标签的锚点实现,其原理在这里。
滚动触发目录变换:通过js监听滚动事件,判定当前所处段落,令对应目录项高亮。
我写了一个简单的demo来演示这个效果,

源码地址:https://github.com/owenliang/js-toc

在线体验:http://owenliang.github.io/js-toc

实现分析

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

利用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("h1").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("h1").text())
         }
        })

    后续

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

    完整代码

    
    
    
     
     
     
     
    
    
     

    另外,这里没有实现嵌套的目录结构,我特意观察了一下hexo的做法,是通过h1,h2,h3来表达层级的,这样在each遍历生成目录的时候可以基于这个信息完成嵌套层级的标记,问题迎刃而解。

你可能感兴趣的:(js实现文章目录索引导航(table of content))