如何实现跨页面平滑滚动？当前仅首页内滚动生效

咱们先拆解下问题根源：你原来的JS代码直接把整个href属性值当作选择器去查找页面元素，但当href是homepage.com#home-features这种完整URL时，$('homepage.com#home-features')肯定找不到对应元素——页面里哪来id是homepage.com#home-features的节点呢？所以核心要做的是从URL里提取锚点部分，再区分当前页面是否为首页来处理逻辑。

步骤1：修改JavaScript逻辑 #

替换成下面的代码，重点做了锚点提取、跨页面跳转后的滚动触发：

$(document).ready(function() {
  $('.smooth-scroll').on('click', function(evt) {
    timber.closeDrawerMenu();
    const href = $(this).attr('href');
    // 从完整URL中拆分出锚点部分（#后面的内容）
    const anchor = href.split('#')[1];
    
    // 如果链接没有锚点，直接按默认跳转逻辑走
    if (!anchor) return;

    // 判断当前页面是否为首页（请根据你的实际首页路径调整判断条件）
    const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';

    if (isHomePage) {
      // 首页内直接执行平滑滚动
      evt.preventDefault();
      $('html, body').animate({
        scrollTop: $(`#${anchor}`).offset().top
      }, 300);
    } else {
      // 非首页时，先跳转到带锚点的首页，再触发滚动
      evt.preventDefault();
      // 跳转到首页锚点地址（也可以直接写你的固定首页URL：'homepage.com#' + anchor）
      window.location.href = `${window.location.origin}/#${anchor}`;
    }
  });

  // 首页加载完成后，自动检测URL中的锚点并执行平滑滚动
  const currentAnchor = window.location.hash.slice(1);
  if (currentAnchor && (window.location.pathname === '/' || window.location.pathname === '/index.html')) {
    // 先重置滚动位置，避免浏览器默认锚点跳转干扰平滑效果
    $('html, body').scrollTop(0);
    // 延迟100ms确保页面元素加载完成
    setTimeout(() => {
      $('html, body').animate({
        scrollTop: $(`#${currentAnchor}`).offset().top
      }, 300);
    }, 100);
  }
});

步骤2：保持HTML链接格式不变 #

你的HTML无需修改，继续使用完整URL形式即可：

<li>
  <a href="homepage.com#home-features" class="smooth-scroll">Features</a>
</li>

关键逻辑说明 #

• 锚点提取：用split('#')把URL拆分成两部分，取第二部分就是我们需要的锚点ID。
• 页面判断：区分当前是否在首页，首页内直接处理滚动；非首页则跳转到带锚点的首页。
• 首页自动滚动：当用户从其他页面跳转到首页锚点URL时，首页加载完成后会自动触发平滑滚动，避免浏览器默认的生硬跳转。

这样不管是在首页内点击，还是从其他页面点击链接，都能实现平滑滚动到目标板块啦！

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