WordPress菜单锚点点击后无法刷新页面的技术求助

问题分析 #

核心问题是：WordPress菜单中的锚点链接（如#about-us）点击时仅定位到页面对应位置，不会触发刷新；但硬编码链接加onClick事件可正常刷新。之前的JS代码无效，大概率是DOM加载时机不对或jQuery选择器/冲突问题。

解决方案 #

方案1：修正JavaScript代码（灵活处理） #

将代码改为DOM就绪后执行，同时兼容WordPress的jQuery命名规范：

<script>
// 等待DOM完全加载后执行
jQuery(document).ready(function($) {
  // 匹配所有指向#about-us的菜单链接
  $('a[href$="#about-us"]').on('click', function(e) {
    e.preventDefault();
    // 先跳转至锚点位置，再强制刷新页面
    window.location.href = this.href;
    setTimeout(function() {
      window.location.reload(true);
    }, 100);
  });
});
</script>

• 将这段代码放到header.php的</body>标签前，或用WordPress的wp_enqueue_script方法加载更规范。
• 若仅针对特定菜单项（如#menu-item-2），把选择器改成$('#menu-item-2 a')即可。

方案2：用WordPress钩子自动添加刷新事件（最规范） #

在主题的functions.php中添加以下代码，自动给包含#about-us的菜单链接加上onclick属性：

add_filter('nav_menu_link_attributes', 'add_anchor_refresh_handler', 10, 3);
function add_anchor_refresh_handler($atts, $item, $args) {
  // 判断菜单项链接是否包含目标锚点
  if (strpos($atts['href'], '#about-us') !== false) {
    $atts['onclick'] = 'window.location.reload(true);';
  }
  return $atts;
}

• 无需手动修改菜单或JS代码，后台菜单中只要链接包含#about-us，点击时就会自动触发刷新。

方案3：手动修改菜单链接URL #

在WordPress后台「外观 > 菜单」中，把目标菜单项的链接从#about-us改成完整站点URL+锚点（比如https://你的域名.com#about-us），然后保存。

• 方法简单直接，但站点域名变更时需重新修改链接。

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