HTML原生JS实现自动生成文章目录及跟随内容滚动

最新推荐文章于 2024-09-07 11:08:26 发布

原创最新推荐文章于 2024-09-07 11:08:26 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

起初是在网上搜些文章，看到有些站侧边会有一个目录，我就搜了一下看看有没有现成的库可以引用，网上找了一圈也没有，索性自己动手丰衣足食啦

已开源，无加密，可以先访问DEMO看看是否是自己需要的东西，再决定是否在GitHub下载代码

Demo：https://657258535.github.io/Catalog-generation

源码地址：https://github.com/657258535/Catalog-generation

原理其实也很简单，利用原生JS写的，搜索选择器指定元素内容

获取它们的H标签（H1 - H6）并给它依次偏移5个像素，显示层级关系

监听滚动以及距离顶部的距离判断是否还在视图内，是否更新目录位置

将生成的目录插入选择器选定的元素内

部分代码截图：详情访问GitHub

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yitonge

关注关注

12
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js 遍历html 生成目录,实现文章生成目录导航

weixin_29151301的博客

06-05

1059

一、原因最近看大家的博客都比我优秀。然后就是不论博客大小都有这个目录导航功能。而且我自己在翻看自己的博客站点的时候觉得没有导航功能很麻烦。所以就给自己的博客升级下，增加了导航功能。写出来的原因是因为这个功能比较冷门。写出来分享一下。二、编写生成目录1、先分析你的编辑器生成的文章html结构。这一步很重要。为什么我不是在编辑器直接去生成目录呢？因为编辑器本身功能就很重，然后你如果在编辑器去生成目录，...

2021年原生JS实现目录滚动特效

码蝗的博客

03-15

366

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title> <style> body { font-size: 12px; line-h...

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_39601194的博客

06-28

870

什么叫TOC呢？table of content。具体什么效果呢？可以随便找个hexo博客中体验一下，例如这个。好了，实现它有2个要点：点目录跳到段落：通过标签的锚点实现，其原理在这里。滚动触发目录变换：通过js监听滚动事件，判定当前所处段落，令对应目录项高亮。我写了一个简单的demo来演示这个效果，实现分析#toc是左侧的目录，#content是右侧的文章正文。第1章节第2章节第3章节第4章节利...

偷得浮生半日闲

10-22

3078

当网页有文章，文章中有很多标题。我们有时会需要生成目录大纲，以便他人查阅。生成目录到是不难，但是怎么实现目录跟随着页面滚动而改变目录的高亮标题？

JS 生成文章目录树

Zichen_Lin的博客

10-25

1819

原文地址：我们在网页浏览文章时，会发现在页面上总有一块固定区域，用来展示文章的目录结构，以帮助我们快速定位到对应的内容。今天我们就用JavaScript来实现文章目录树的功能。

将富文本内容生成目录

最新发布

12-28

### 解析富文本并生成文档目录为了从富文本中提取标题...以上代码片段展示了如何在 Vue.js 应用程序里高效地管理长篇文章或教程类型的网页布局，使得读者能够方便快捷地浏览不同主题板块而不必频繁翻页查找所需资料。

JavaScript练手小技巧：利用鼠标滚轮控制图片轮播

九天翔龙的技术博客

09-07

1625

近日，在浏览网站的时候，发现了一个有意思的效果：一个图片轮播，通过上下滚动鼠标滚轮控制图片的上下切换。于是就有了自己做一个的想法，顺带复习下鼠标滚轮事件。

HTML5、CSS、JS基础

qq_49101841的博客

03-03

2753

学习笔记

JavaScript自动生成博文目录导航

sincy09的博客

09-26

1831

参考：https://www.cnblogs.com/xdp-gacl/p/3718879.html 按标题层级生成目录导航，包括浮动目录导航和页面目录导航。 /*生成浮动目录导航的CSS*/ #sideBar{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:left; po...

听海Movie的专栏

05-22

2548

require(["jquery", "bootstrap"], function($) { $(function() { $('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height()); }); var goTo = $(".con"); var guid

js实现目录链接,内容跟着目录滚动显示的简单实例

10-21

下面小编就为大家带来一篇js实现目录链接,内容跟着目录滚动显示的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

JavaScript生成文章目录导航

09-26

按标题层级生成文章目录导航。包括浮动目录导航窗口，文章顶部目录导航。

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

10-15

主要介绍了js实现文章目录索引导航(table of content),需要的朋友可以参考下

如何根据页面标签自动生成文章目录？分析+代码详解

Mintimate的优快云博客

10-13

1908

作者：Mintimate 博客：https://www.mintimate.cn Mintimate’s Blog，只为与你分享文章目录文章目录功能大家再熟悉不过了吧，主要用于长篇文章、教程内：用户可以根据自己需求，点击目录进行跳转。常见的目录效果：这样的文章目录，难道要写到数据库里么？当然不是，这个肯定是前端人员实现的。而且用简单的JavaScript就可以实现。 “Any application thatcanbe written in JavaScript,willevent

html标题自动生成树形目录,利用原生JS自动生成文章标题树的实例

weixin_39884412的博客

06-14

1023

实现原理很简单，就是循环文章模块，并抽取其中的h2、h3标签，将其中的内容赋予给新建的title树。代码如下：HTML代码：二级标题三级标题hello hello hello hello hello hello hello hello hello hello hello hello三级标题三级标题三级标题三级标题hello hello hello hello hello hello hello h...

js 遍历html 生成目录,JS 根据文章中的标题生成目录索引

weixin_42319865的博客

06-05

1021

在浏览一些博客或 wiki 类网站的时候，你可能会发现在文章的开头或侧边会有一个目录，点击就可以跳转到指定的章节。对于比较长的文章来说，目录还是比较重要的。通过目录可以快速了解文章包含的内容，要查看某个章节也可以直接跳转。最近准备给博客增加一个生成文章目录的功能，下面简单写一下实现方式。代码我这里使用了 jQuery，代码如下：// 给 h2 到 h5 增加一个 content-title 的 ...

用javascript自动生成html的目录树

BLADCS的博客

10-07

1396

一时兴起的需求是：用javascript自动生成html的目录树效果是这个样子：代码虽然用了jQuery，但用的地方并不是很多，主要还是javascript。用的jQuery的版本是jquery-3.4.1.js <script src="jquery-3.4.1.js"></script> <script> $(document).ready(function (){ var hs=$("h2").siblings(); var con=0;