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等，视情况调整。