当前位置: 首页 > news >正文

wordpress配置文章详情页自动生成目录点击定位

1、进入后台文章编辑页面,将需要生成目录的标题改为h2

2、进入文章详情页elementor编辑页,在文章详情上新增一个html容器,放入以下内容

<!-- 进度条容器 -->
<div id="progress-container"><div id="progress-bar"></div>
</div><!-- 目录容器 -->
<div id="toc-container"><h2>目录</h2><ul id="toc-list"></ul>
</div><script>// 自动生成目录document.addEventListener('DOMContentLoaded', function() {const tocContainer = document.getElementById('toc-container');const tocList = document.getElementById('toc-list');// 获取页面上所有的 h2 标签const headings = document.querySelectorAll('.elementor-widget-theme-post-content h2');// 遍历 h2 标签并创建目录项headings.forEach((heading, index) => {// 获取标题文本和ID(如果没有ID则使用默认的ID)const title = heading.textContent || heading.innerText;const id = heading.id || `heading-${index}`;// 如果没有 id,则生成一个if (!heading.id) {heading.id = id;}// 创建目录列表项const listItem = document.createElement('li');const link = document.createElement('a');link.href = `#${id}`;link.textContent = title;// 把链接添加到列表项中listItem.appendChild(link);tocList.appendChild(listItem);});// 给目录链接添加点击事件,实现页面滚动tocList.addEventListener('click', function(event) {if (event.target.tagName === 'A') {const targetId = event.target.getAttribute('href').substring(1);const targetElement = document.getElementById(targetId);if (targetElement) {window.scrollTo({top: targetElement.offsetTop - 10, // 适当调整偏移量behavior: 'smooth' // 平滑滚动});event.preventDefault(); // 防止跳转}}});});// 进度条逻辑const progressBar = document.getElementById('progress-bar');window.addEventListener('scroll', function() {const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;const windowHeight = window.innerHeight || document.documentElement.clientHeight;const scrollProgress = (scrollTop / (documentHeight - windowHeight)) * 100;progressBar.style.width = `${scrollProgress}%`;});
</script><style>/* 进度条容器 */#progress-container {position: fixed; top: 0;left: 0;width: 100%;height: 5px;background-color: #f3f3f3;z-index: 9999; }/* 进度条 */#progress-bar {height: 100%;width: 0%; background-color: #4caf50;transition: width 0.2s ease; }/* 目录样式 */#toc-container {margin-top: 30px;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;width: 100%;}#toc-container h2 {font-size: 18px;margin-bottom: 10px;}#toc-list {list-style: none;padding: 0;}#toc-list li {margin-bottom: 8px;}#toc-list a {text-decoration: none;color: #333;}#toc-list a:hover {color: #0066cc;}
</style>

3、保存发布,查看前台效果。

​​​​​​​

4、有些页面可能定位不准确,可以修改代码中的51行偏移量进行调整

5、也可以修改生成目录的标签, 改为h3或者h4等,视情况调整。

http://www.dtcms.com/a/308660.html

相关文章:

  • 计算机存储正数,负数
  • Flask Bootstrap 后台权限管理方案
  • 【工具变量】企业数字化转型:数字化无形资产占比测算(2007-2024年)
  • 【算法基础课-算法模板2】数据结构
  • kmp复习,需要多看多练
  • 类和对象(前章)
  • 藏语识别技术在媒资行业的应用案例剖析
  • SELinux 核心概念与访问控制机制解析
  • Windows 10 WSLUbuntu 22.04 安装并迁移到 F 盘
  • MyBatis入门---环境搭建
  • 基于SpringBoot和SpringAI框架实践
  • 案例开发 - 日程管理 - 第四期
  • 鸿蒙开发交叉类型
  • 《零基础入门AI:传统机器学习核心算法(决策树、随机森林与线性回归)》
  • pyspark使用
  • 使用SFTTrainer进行微调
  • sqli-labs靶场Less24
  • FlexLM/SLM协议解析
  • [硬件电路-110]:模拟电路 - 能量并非凭空产生,自激振荡器,一种把直流能量转换成交流信号的装置!
  • TCP/IP协议的安全隐患与防范措施
  • php session 和 jwt 区别和使用场景
  • TCP窗口缩放配置在云服务器高延迟网络中的参数调整测试
  • 如何快速部署主数据管理解决方案?
  • 用于Forza系列测试自动化的3D可视化工具
  • MySQL 8.0 OCP 1Z0-908 题目解析(38)
  • Android Jetpack消息推送全解析:从FCM集成到Jetpack组件优化
  • 信令和信号在通信领域的区别
  • 详解分布式数据库缓存技术:高性能数据访问的基石
  • 【javascript】Reflect学习笔记
  • OCP网卡、OVS网卡和DPU(数据处理单元)三类技术方案