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是左侧的目录,#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遍历生成目录的时候可以基于这个信息完成嵌套层级的标记,问题迎刃而解。
原文链接:https://yuerblog.cc/2017/12/04/js-toc/
(资源库 www.zyku.net)
栏 目:JavaScript
下一篇:js中!和!!的区别与用法
本文标题:js实现文章目录索引导航(table of content)
本文地址:https://www.zyku.net/js/1903.html
您可能感兴趣的文章
- 06-26highlightjs网页代码高亮插件调用方法
- 05-10JS - 获取文件后缀,判断文件类型(比如是否为图片格式)
- 05-10js中!和!!的区别与用法
- 05-10JS实现单张或多张图片持续无缝滚动的示例代码
- 05-10js根据后缀判断文件文件类型的代码
- 05-10JS端基于download.js实现图片、视频时直接下载而不是
- 04-02CentOS安装Nodejs教程
- 02-11JS操作剪贴板代码详解
- 01-04帝国CMS页面JS调用登录状态loginjs.php中获取会员头像
- 11-30CentOS下安装并配置nodejs环境教程
- 04-24oppoa93关闭VoLTE高清通话方法
- 12-01spotify分享到朋友圈教程介绍
- 01-12Just A Line-Just A Line应用软件功能
- 02-17帝国CMS-管理员密码重置插件下载
- 08-14剪映怎么制作七夕星蝶公主同款
- 01-12爱影-爱影应用软件功能介绍
- 12-23HTML <br> 标签
- 02-17帝国CMS-前台定时执行刷新任务插件下载
- 03-10Sublime Text3下SublimeCodeIntel的使
- 07-05Linux symlinks命令
最近更新
阅读排行
猜你喜欢
- 10-28支付宝齐白石付款码如何获取
- 01-11壹充电-壹充电应用软件功能介绍
- 09-19微信视频号怎么取消已赞过视频
- 09-15ColorOS12尝鲜报名教程分享
- 01-09一加10pro如何拍月亮
- 07-21CentOS 7编译安装Nginx的方法
- 07-30jquery v3.0.0
- 04-18红魔6手机设置炫彩灯效教程
- 10-11喜马拉雅听书在哪里打开字幕
- 01-29华为sound音箱设置唤醒音效应答方法