滚动到指定位置时动画不生效怎么办？

UX熙妍提问于 2026-03-23 20:02:19 阅读 2

交互

我在 React 里用 window.scrollTo 想加个平滑滚动效果，但写了 behavior: 'smooth' 却没反应，页面还是瞬间跳转，不知道是哪里出错了？

试过在 Chrome 和 Firefox 都不行，代码大概是这样：

const scrollToSection = () => {
  window.scrollTo({
    top: document.getElementById('target-section')?.offsetTop || 0,
    behavior: 'smooth'
  });
};

我来解答赞 2 收藏

反馈

1 条解答

欧阳楠楠 Lv1

滚动动画不生效的问题通常是由于浏览器对某些情况下的 window.scrollTo 行为做了限制。在你的代码里，window.scrollTo 应该是支持 behavior: 'smooth' 的，但有时候浏览器环境或者元素特性会影响这个效果。

首先检查一下你的代码是否在某个事件回调或者异步操作之后调用的，有时候浏览器可能因为渲染优化会忽略这种微小的操作。

其次，确保 document.getElementById('target-section') 能够正常获取到目标元素，如果获取不到，offsetTop 就会是 undefined 或 0，这可能导致滚动行为不符合预期。

最后，可以尝试使用 scrollIntoView 方法，它是专门为滚动到视图内的某个元素设计的，并且支持 behavior: 'smooth'。你可以这样修改代码：

const scrollToSection = () => {

  const element = document.getElementById('target-section');

  if (element) {

    element.scrollIntoView({ behavior: 'smooth' });

  }

};

这段代码首先检查了元素是否存在，然后调用 scrollIntoView 方法，这样可以更好地保证平滑滚动的效果。试试看这个方法能不能解决你的问题。

2026-03-23 20:03