页面加载时从URL获取锚点ID并实现平滑滚动的方法

嘿，很高兴能帮到你！你的现有代码已经能正确定位锚点并添加激活类了，要改成平滑滚动其实只需要加几行代码就行，我给你两种常用的方案，你可以根据项目情况选择：

既然你已经在用jQuery，直接用它的animate()方法就能实现平滑滚动，同时保留你原来的逻辑。修改后的代码如下：

try {
  if(window.location.hash) {
    const target = $(window.location.hash);
    // 先判断目标元素是否存在，避免无意义的执行
    if(target.length) {
      // 执行平滑滚动，800是滚动时长（毫秒），可按需调整
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 800);
      // 保留你原来的添加激活类逻辑
      target.parent().addClass('item active');
    }
  }
} catch (e) {
  // 增加错误日志，方便后续排查问题
  console.error('平滑滚动执行出错:', e);
}

小细节说明： #

• target.offset().top会获取目标元素距离文档顶部的像素距离，作为滚动的目标位置
• 800毫秒的滚动时长是个比较适中的数值，你可以改成500（更快）或者1200（更慢）来匹配你的页面风格
• 新增的target.length判断能避免当URL中的hash对应不到页面元素时出现错误，让代码更健壮

如果你的项目后续打算移除jQuery依赖，用原生JS的scrollIntoView()方法会更简洁，它原生支持平滑滚动配置：

try {
  if(window.location.hash) {
    // 去掉hash开头的#号，拿到纯ID
    const targetId = window.location.hash.slice(1);
    const target = document.getElementById(targetId);
    if(target) {
      // 开启平滑滚动，还能控制元素的对齐位置
      target.scrollIntoView({
        behavior: 'smooth', // 核心：启用平滑滚动
        block: 'start' // 让元素顶部对齐视口顶部，可选'center'/'end'
      });
      // 原生JS写法添加激活类，和jQuery效果一致
      target.parentElement.classList.add('item', 'active');
    }
  }
} catch (e) {
  console.error('平滑滚动执行出错:', e);
}

小细节说明： #

• behavior: 'smooth'是实现平滑滚动的关键参数，现代浏览器都支持这个配置
• block参数可以调整滚动后元素在视口中的位置，比如选'center'会让元素居中显示，适合需要突出锚点内容的场景

额外注意点： #

如果你的页面有固定在顶部的导航栏，滚动后可能会导致锚点元素被导航栏遮挡。这时候可以：

• jQuery方案：把scrollTop的值改成target.offset().top - 导航栏高度
• 原生方案：给目标元素添加CSS属性scroll-margin-top: 导航栏高度;，确保元素能完整显示在视口中

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