WordPress独立页面菜单跳转首页锚点失效及平滑滚动问题求解

我来帮你搞定这个两难的问题！既要让单页首页内的菜单保持平滑滚动，又要让隐私政策、服务条款这些独立页面的菜单能跳转到首页对应区块，还得保留平滑滚动效果，咱们可以分两步来处理：

1. 统一菜单链接格式 #

先把所有菜单里的跳转链接改成完整的URL格式，比如：
https://yourdomain.com/#sec-home
https://yourdomain.com/#sec-about
这样不管你在哪个页面点击菜单，都会先跳转到首页，同时带上目标区块的锚点。

2. 修改平滑滚动JS代码 #

接下来调整你的JavaScript代码，区分首页内点击和跨页面跳转两种场景：

// 处理菜单点击事件
$(document).ready(function() {
  $(".nav a").click(function(e) {
    const targetHref = $(this).attr("href");
    // 识别是否是指向首页的锚点链接
    const isHomeAnchor = targetHref.includes(window.location.origin + "/#") || targetHref.startsWith("#");

    if (isHomeAnchor) {
      // 如果当前已经在首页，阻止默认跳转，直接平滑滚动
      if (window.location.pathname === "/" || window.location.pathname === "/index.php") {
        e.preventDefault();
        // 提取锚点ID（不管链接是完整URL还是仅#开头）
        const targetId = targetHref.startsWith("#") ? targetHref : "#" + targetHref.split("#")[1];
        const position = $(targetId).offset().top;
        $("body, html").animate({ scrollTop: position }, 800); // 800是滚动速度，可自行调整
      }
      // 不在首页的话，让浏览器正常跳转到首页，后续处理加载后的滚动
    }
  });

  // 首页加载完成后，检测URL中的锚点并平滑滚动到目标区块
  $(window).on("load", function() {
    const hash = window.location.hash;
    // 确保锚点对应的元素存在
    if (hash && $(hash).length > 0) {
      const position = $(hash).offset().top;
      $("body, html").animate({ scrollTop: position }, 800);
    }
  });
});

代码说明： #

• 首页内点击：当你在首页点击菜单链接时，代码会阻止默认的锚点跳转行为，直接计算目标区块的位置并执行平滑滚动，和你之前的效果一致。
• 跨页面跳转：当你在隐私政策等页面点击菜单时，浏览器会先跳转到首页，等页面完全加载后，代码会读取URL中的锚点，自动平滑滚动到对应的区块，不会出现生硬跳转的问题。

额外注意事项： #

• 确保你的WordPress已经加载了jQuery（默认是加载的，但如果你的主题禁用了，需要重新启用）。
• 如果你的首页路径不是根目录（比如/home/），记得修改代码中window.location.pathname的判断条件，改成你的首页实际路径。
• 滚动速度（代码中的800）可以根据需求调整，数值越大滚动越慢。

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