如何设置WordPress页面默认滚动至页面中部？

方法1：锚点跳转（URL导向） #

• 第一步：在页面中部你想定位的元素上添加唯一ID，比如要定位到横幅下方的内容容器，给它加id="main-content"：

  <div id="main-content" class="your-content-class">
    <!-- 页面中部内容 -->
  </div>
  

• 第二步：在主题的functions.php文件中添加以下PHP代码，自动给目标页面的URL加上锚点（示例针对首页，可按需修改页面判断条件）：

  add_action('template_redirect', function() {
      // 替换is_front_page()为你需要的页面判断，比如is_page('about')指定某页面
      if (is_front_page() && !isset($_GET['anchor-added'])) {
          wp_redirect(get_permalink() . '#main-content?anchor-added=1');
          exit;
      }
  });
  

  这段代码会在用户访问指定页面时，自动跳转到带锚点的URL，浏览器会直接定位到对应ID的元素位置。

方法2：JavaScript自动滚动（无URL变化） #

如果不想修改URL，直接用JS实现页面加载后滚动到目标位置：

• 打开主题的footer.php文件，在</body>标签前添加以下代码：

  <script>
  window.addEventListener('load', function() {
      // 替换#main-content为你设置的目标元素ID
      const target = document.getElementById('main-content');
      if (target) {
          // 可调整offset值，比如减去顶部导航栏高度，避免内容被遮挡
          const offsetTop = target.offsetTop - 80;
          window.scrollTo({
              top: offsetTop,
              behavior: 'smooth' // 平滑滚动，去掉则为瞬间跳转
          });
      }
  });
  </script>
  

• 若不想修改主题文件，也可在WordPress后台「外观」→「自定义」→「额外JS」（不同主题位置可能有差异）中添加这段代码。

方法3：利用WordPress自定义钩子（针对特定页面） #

如果是特定页面模板，可通过钩子在页面底部注入JS：

• 在主题的functions.php中添加以下代码：

  add_action('wp_footer', function() {
      if (is_front_page()) { // 替换为目标页面的判断条件
  ?>
  <script>
  window.addEventListener('load', function() {
      const target = document.getElementById('main-content');
      target && window.scrollTo(0, target.offsetTop - 80);
  });
  </script>
  <?php
      }
  });
  

注意事项 #

• 确保目标元素的ID唯一，避免和页面其他元素重复。
• 若页面有动态加载内容（如AJAX加载），可将load事件替换为DOMContentLoaded，或监听动态内容加载完成的事件。
• 根据页面顶部固定元素（如导航栏）的高度，调整offsetTop的数值，避免目标内容被遮挡。

内容的提问来源于stack exchange，提问作者kylian35