Understrap-child主题sticky navbar点击菜单跳转顶部问题求助

一、检查菜单链接的Href属性 #

• 如果你是通过WordPress后台菜单编辑器创建的左侧菜单，先检查每个菜单项的自定义链接是否设成了#或者空值。浏览器碰到#会默认跳转到页面顶部，这是最常见的原因。
  • 解决办法：如果是要跳转到页面内某个锚点，填正确的锚点ID（比如#section-about）；如果只是用来触发JS操作（比如展开子菜单），把Href改成javascript:void(0)，或者保留#但用JS阻止默认跳转。

二、用JS阻止默认跳转行为 #

要是菜单项必须保留#当占位符，就给链接加个点击事件阻止跳转：

• 在child主题的自定义JS文件（比如js/custom.js）里加这段代码，或者通过functions.php注册脚本：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你左侧菜单的实际选择器，比如你的菜单容器是.sidebar-menu就改成这个
  const sidebarLinks = document.querySelectorAll('.sidebar-menu a[href="#"]');
  sidebarLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转
      // 这里可以加你需要的其他逻辑，比如展开子菜单
    });
  });
});

三、排查Sticky导航的JS冲突 #

有些Sticky导航的自定义脚本可能会在菜单点击时强制滚回顶部，检查你child主题里的sticky相关代码：

• 找有没有window.scrollTo(0,0)或者document.documentElement.scrollTop = 0这类代码，这些会强制页面回到顶部。
• 找到后要么删掉，要么加个条件判断，只在需要的时候执行（比如只有点击回到顶部按钮时才触发）。

四、检查WordPress菜单的过滤器 #

如果是用wp_nav_menu()输出的菜单，看看functions.php里有没有用nav_menu_link_attributes过滤器修改链接属性：

• 要是有过滤器把正常链接改成了#，调整过滤器的逻辑，别替换掉有效链接的Href。

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