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

2024-07-29 09:33:25

什么叫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遍历生成目录的时候可以基于这个信息完成嵌套层级的标记，问题迎刃而解。

文章或博客自动生成章节目录索引(支持三级)的实现代码

自动生成章节目录索引(只支持一级) 一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量.如果能自动生成章节索引岂不是节省了一大堆工作量.本来想通过FireBug看看Fish Li源码是怎么实现的,但是好像j
Bootstrap框架动态生成Web页面文章内目录的方法

引言在写博客的时候,为了条理性起见,经常会使用许多小标题,当文章长时,需要来回在不同的标题之间穿梭,如果手动添加目录,添加锚点,实在是麻烦,为此,可以动态生成一块目录区域,并使用Bootstrap提供的Affix插件将目录区域固定在页面上.Bootstrap文档便使用了它准备工作-引入bootstrap.min.js 将bootstrap.min.js放入body之前的script标签中,uikit.min.js暂时不引入. 引入相关插件之后,我们的思路是首先根据文章自动生成锚点以及菜单内容
js实现文章目录索引导航(table of content)

什么叫TOC呢?table of content. 具体什么效果呢?可以随便找个hexo博客中体验一下,例如这个. 好了,实现它有2个要点: 点目录跳到段落:通过<a>标签的锚点实现,其原理在这里. 滚动触发目录变换:通过js监听滚动事件,判定当前所处段落,令对应目录项高亮. 我写了一个简单的demo来演示这个效果, 源码地址:https://github.com/owenliang/js-toc 在线体验:http://owenliang.github.io/js-toc 实现分析 #toc
让网站自动生成章节目录索引的多个js代码

第一种:只支持一级目录 <h3>,作为段落不支持分类一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量.如果能自动生成章节索引岂不是节省了一大堆工作量.本来想通过FireBug看看Fish Li源码是怎
JS实现移动端可折叠导航菜单（现代都市风）

效果图 1.html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,7
Vue mock.js模拟数据实现首页导航与左侧菜单功能

目录一.mock.js的使用 mock.js的使用步骤 1.安装mock依赖 2.添加开发环境及生产环境的配置 3.引入到main.js 二.前台主页面的搭建 2.1 准备相关组件 2.2 配置路由与组件的关系 2.3 导入图片 2.4 测试三.左侧菜单的收缩功能 3.1 定义一个总线 3.2 改变收缩图标的样式四.退出功能 4.1 添加点击方法 4.2 测试一.mock.js的使用 mock.js的使用步骤 ① 下载依赖 npm install mock -d(开发环境使用) ② 引入
利用JS生成博文目录及CSS定制博客

本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法,分享给大家供大家参考,具体内容如下 1.JS代码想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的. 拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了.要注意目录的生成是几级标题,这一点可是很重要的.JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意. 综合来
JS实现自动变化的导航菜单效果代码

本文实例讲述了JS实现自动变化的导航菜单效果代码.分享给大家供大家参考.具体如下: 自动变化的JS导航菜单,按照时间自动切换,有需要的参考一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
使用JS动态构建目录树

在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是更多的情况是,这棵树需要随时被改动,所以我们期望的是他能够被动态的构建. MVC,算是了解一点,那本文就把这棵树根据M-V-C给拆开分解吧. 下面就来看看这棵树是怎么构建的. Module [数据层] var tree = { "id": 0, "a1": { "id": 1, "name": "a1", "childr
Typecho插件实现添加文章目录的方法详解

目录添加文章标题锚点显示文章目录添加文章目录样式定位到文章定位到目录我的长博文不少,比较影响阅读体验,有必要添加一个文章目录功能.相比 Wordpress, Typecho 的插件就比较少了.我想找一个像掘金那样为文章添加目录的插件,没一个合适的.此类教程也不是很多,而且差不多都是前台 JavaScript 来实现的,感觉这样不如后台实现来的好. 注意:我使用的是Joe主题7.3,其他主题文件路径可能不一样. 添加文章标题锚点 1.声明 createAnchor 函数在 core/
用JS让文章内容指定的关键字加亮

用JS让文章内容指定的关键字加亮是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现... 不知道怎样来实现这样的功能啊?特此求助 txt.innerHTML = txt.innerHTML.replace(/文章/gi,"文章"); [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 多关键词用JS让文章内容指定的关键字加亮是这样的.. 现在有这些关键字:

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

相关推荐

随机推荐