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

于 2024-04-01 14:11:15 发布
阅读量631 收藏 1
点赞数 12
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yitonge/article/details/137230568
版权

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

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

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

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

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

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

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

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

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

Yitonge
关注
  • 12
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021年原生JS实现目录滚动特效
码蝗的博客
03-15 212
<!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...
js实现目录链接,内容跟着目录滚动显示的简单实例
10-21
下面小编就为大家带来一篇js实现目录链接,内容跟着目录滚动显示的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
文档内容滚动，目录跟随高亮
weixin_47863904的博客
10-08 200
锚点实现，文档内容滑动，目录高亮
js提取文章中的h标签生成文章目录
qq_39634880的博客
03-28 1031
#’ 号开始的，如果页面中，有两个一样的 ，比如都是 # 我是h1，那就不好获取里面的domid，要获取Markdown转换成html的数据。一.本人这边用的Markdown的转换插件是marked。使用Markdown编辑编写文章时，我们会使用。标签来定义章节标题，Markdown原生是以。三.其他参考(可以参考里面的生成逻辑)二.拿到转换的html生成目录树。
vue.js自动提取标题生成右侧目录（实现监听滚动，锚点定位）
wockky的博客
07-28 5080
效果图如下： 代码： <template> <div class="icon-sources-wapper wapper"> <el-breadcrumb class="icondetials_header" separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/resources' }">组件库</el-breadcrumb-
JS 生成文章目录树
Zichen_Lin的博客
10-25 1541
原文地址：我们在网页浏览文章时，会发现在页面上总有一块固定区域，用来展示文章的目录结构，以帮助我们快速定位到对应的内容。今天我们就用JavaScript来实现文章目录树的功能。
js生成目录并实现目录节点跟随滚动高亮
偷得浮生半日闲
10-22 2449
当网页有文章，文章中有很多标题。我们有时会需要生成目录大纲，以便他人查阅。生成目录到是不难，但是怎么实现目录跟随着页面滚动而改变目录的高亮标题？
内容与目录（标签）关联互动方案
qq_42931285的博客
04-23 491
1、先上代码： <template> <div> <h1>页面内容滚动与右侧导航标签互动关联 效果演示 demo</h1> <div class="content" id="content"> <div class="left"> <section v-for="(item, i) in list" class="text-node" :key="i" :id="'p' + i"&g
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2243
学习笔记
html+css+js基础问答
qq_43751465的博客
08-26 5200
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
HTML5与CSS3及Less
w18789476022的博客
11-21 736
软件 软件的分类 系统软件：Windows、Linux、macOS. 应用软件：office、qq 游戏软件：王者荣耀 软件的组成 通常情况下，现在的软件由两个部分组成： 客户端：用户通过客户端来使用软件。 客户端的形式： （1）文字客户端：古老的方式，通过命令行来使用软件。 （2）图形化界面：通过点击拖动等来使用软件。 （3）网页：通过访问网页来使用软件。所有的网站都属于这个范畴。（B/S架构：Browser/Sever） 网页的特点：相较于传统的图形化界面，网页具有如下一些优点： 不需要安装；无需
海康威视插件播放视频流
要温柔以待的博客
11-08 2377
海康威视插件播放视频
原js笔记
Pwsifeng的博客
01-10 2533
s原生JS笔记 电话：17339853876（微信同号） 二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作 人机交互 前后端交互 3、HTML、CSS、JS的作用和关系 一个网页由三部分组成：HTML、CSS、Javascript HTML： 结构（静态） [外链图片转存失败,源站可能有防盗链
js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录
PrimaryColor
03-11 1621
效果图： 我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a>实现的，点击a标签后，会跳转到与当前href值（除#号）与之相同的a标签name值的位置。 一般的文章都是都过h1-h5标题和p标签的富文本来实现，有些为了美观，比如csdn，只有总共1-3级标题，所以我们可以通过遍历文章内容的标题标签，进行生成对应的目录。 代码： <!DOCTYPE html> <html.
Vue2框架，使用js上线目录的左右联动
qq_53613764的博客
10-18 383
div class="top">车型选择</div>点击左侧目录时，右侧会自动跳转到相应的内容区域。滑动右侧内容时，左侧目录会跟随内容变化。TabArr: [], //标签小组。"阿尔法-罗密欧","阿尔法-罗密欧",// 点击左侧菜单栏跳转到相应的区域。// 滚动时左边的菜单栏也滚动。-- 车型选择 -->-- 主页配件 -->
html 目录生成器,Tocify：动态节点目录菜单生成器_html/css_WEB-ITnose
weixin_28813025的博客
06-05 472
Tocify是一个能够动态生成文章节点目录的jQuery插件。假如我们有一篇很长的文章，文章有多个节点，那么使用Tocify可以根据节点元素动态生成文章目录，点击目录可以平滑滚动到对应的节点，当然当滚动页面时，目录结构会根据当前监听到的节点进行切换到当前目录状态。查看演示 下载源码Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格，我们可以...
wordpress如何制作一个跟随滑动的文章目录？Content Index文章目录插件修改篇
kongjiea笔记
03-02 7281
1、wp后台配置 2、修改插件源码关闭自动请求加载插件的css 注释掉加载样式的代码，添加相应的样式到模板的主样式css中 相关文章目录添加的样式：/*文章目录*/ .content-index a{text-decoration:none;} .content-index a em{color:#555;} .content-index a span{text-decorati
JavaScript 遍历文档生成目录结构
最新发布
zy0412326的专栏
02-11 476
要遍历 HTML 文档并生成目录结构，你可以使用 JavaScript 来进行 DOM 操作和遍历。以下是一个简单的示例代码，演示了如何遍历文档中的标题元素（例如。方法获取文档中的所有标题元素。然后，我们遍历这些标题元素，并根据其级别创建对应的目录结构。最后，我们将生成的目录添加到文档中的某个容器元素中。需要注意的是，这只是一个简单的示例，可能无法覆盖所有情况。在实际应用中，你可能需要根据具体的需求对代码进行调整和扩展。JavaScript 遍历文档生成目录结构。在这个示例中，我们首先使用。
原生js实现列表内容自动向上滚动效果
09-01
要实现列表内容自动向上滚动的效果，可以使用原生的JavaScript来操作DOM元素和定时器。 首先，可以通过getElementById或querySelector等方法获取到包含列表内容的元素。 然后，通过获取元素的高度、内容等信息来判断是否需要滚动。 接着，可以利用定时器setInterval来不断改变元素的scrollTop属性值，实现滚动效果。 具体步骤如下： 1. 首先，获取到包含列表内容的元素： ```javascript var listContainer = document.getElementById("listContainer"); //或者使用querySelector根据CSS选择器选择元素： var listContainer = document.querySelector("#listContainer"); ``` 2. 判断是否需要滚动，比如当元素内容的高度大于元素本身的高度时才需要滚动： ```javascript if(listContainer.scrollHeight > listContainer.clientHeight){ // 需要滚动，执行后续操作 } ``` 3. 设置定时器，不断改变元素的scrollTop属性值，实现滚动效果： ```javascript var isScrolling = true; // 表示是否正在滚动 setInterval(function(){ if(isScrolling){ listContainer.scrollTop += 1; // 每次滚动1个像素，可根据需要调整滚动速度 if(listContainer.scrollTop === (listContainer.scrollHeight - listContainer.clientHeight)){ listContainer.scrollTop = 0; // 滚动到底部后，回到顶部 } } }, 50); // 每50毫秒滚动一次，可根据需要调整滚动速度 ``` 4. 可以添加一些事件来控制滚动的开始和停止，比如鼠标进入和离开时暂停和恢复滚动效果： ```javascript listContainer.onmouseover = function(){ isScrolling = false; // 鼠标进入时停止滚动 } listContainer.onmouseout = function(){ isScrolling = true; // 鼠标离开时恢复滚动 } ``` 以上就是用原生JavaScript实现列表内容自动向上滚动效果的基本步骤。根据具体需求，还可以进行一些定制和调整，比如添加缓动效果、点击按钮控制滚动等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值