锚点链接滚动至目标区域后立即刷新页面的问题求助

问题根源 #

1. 菜单锚点链接采用完整URL+锚点格式，当前页点击时，浏览器会先滚动到锚点位置，随后触发页面刷新（因为是完整URL请求），刷新后页面回到顶部。
2. 你之前的JS代码选择器a[href^="#"]仅匹配以#开头的链接，而菜单链接是完整URL开头，因此代码根本没有作用到目标链接上。
3. 页面内其他按钮用相对路径锚点，浏览器默认处理不会触发刷新，因此能正常工作。

解决方案 #

方案1：精准匹配菜单锚点链接的JS代码 #

使用更精准的选择器锁定菜单中的锚点链接，阻止当前页内的刷新行为，实现平滑滚动：

document.addEventListener('DOMContentLoaded', function() {
  // 定位子菜单中所有带锚点的链接
  document.querySelectorAll('.sub-menu a[href*="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      const targetHash = this.hash;
      const linkPath = new URL(this.href).pathname;
      const currentPath = window.location.pathname;

      // 仅处理当前页面内的锚点跳转
      if (currentPath === linkPath && targetHash) {
        e.preventDefault(); // 阻止默认刷新行为
        const targetElement = document.querySelector(targetHash);
        if (targetElement) {
          // 平滑滚动到目标区域
          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
          // 可选：同步更新地址栏哈希，保持URL与滚动位置一致
          window.history.pushState(null, null, targetHash);
        }
      }
      // 跨页跳转保留默认行为，不做干预
    });
  });
});

方案2：修改菜单链接为相对路径（需配合主题设置） #

若WordPress主题允许，直接在后台菜单设置中，将自定义链接的URL改为纯锚点格式（比如#adultReaders），而非完整URL。

• 若主题/插件强制将链接转为完整URL，可搭配上述JS代码修正。

验证要点 #

• 确保JS代码在DOM加载完成后执行（已封装在DOMContentLoaded事件中）。
• 检查目标元素ID与链接锚点完全一致（注意大小写敏感）。
• 打开浏览器控制台，确认无语法报错。

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