设置scroll-behavior:smooth后点击锚点无平滑滚动效果如何解决

• 原生HTML锚点跳转默认的滚动作用对象是全局window/根文档元素，你项目中实际的可滚动容器是自定义的.sections元素，全局滚动已被你隐藏，锚点跳转触发的全局滚动不会作用到自定义滚动容器上，自然不会触发你给.sections设置的scroll-behavior: smooth属性。
• 需先确认你的<Intro>组件根元素是否设置了id="intro"，如果没有对应ID的锚点元素，跳转逻辑本身也无法正常执行。
• 补充检查：你的.sections样式中缺少overflow-y: auto声明，需要补充后才能正常作为自定义滚动容器使用。

方案1：自定义锚点点击事件（兼容性最好，无需调整现有布局） #

禁用a标签默认跳转逻辑，手动控制.sections容器的滚动行为：

1. 修改Topbar.jsx代码：

export default function Topbar() {
  const handleAnchorClick = (e, targetId) => {
    e.preventDefault();
    // 获取自定义滚动容器
    const scrollContainer = document.querySelector('.sections');
    // 获取目标锚点元素
    const targetEl = document.getElementById(targetId);
    if (scrollContainer && targetEl) {
      scrollContainer.scrollTo({
        top: targetEl.offsetTop,
        behavior: 'smooth'
      })
    }
  }

  return (
    <div className="topbar">
      <div className="wrapper">
        <div className="left">
          <a href="#intro" onClick={(e) => handleAnchorClick(e, 'intro')}>asdasd</a>
        </div>
        <div className="right">
        </div>
      </div>
    </div>
  )
}

2. 给Intro组件根元素添加对应ID：

// Intro.jsx示例
export default function Intro() {
  return (
    <div id="intro">
      {/* 原有内容 */}
    </div>
  )
}

3. 补充.sections容器的滚动属性，在app.scss的.sections样式块中添加：

overflow-y: auto;

方案2：全局滚动适配（需调整现有布局） #

如果你可以将滚动逻辑改为全局window滚动，只需把scroll-behavior: smooth设置到全局根元素，原生锚点跳转就会自动触发平滑效果：

// app.scss新增全局样式
html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

该方案需要你取消.sections的固定高度、相对定位等局部滚动相关配置，改为全局滚动布局后生效

内容的提问来源于stack exchange，提问作者Tarek I.