React中overflow设为scroll时调用window.scrollTo(0,0)不生效如何解决

• 你调用window.scrollTo(0, 0)操作的是浏览器窗口的滚动条，但你的目标页面给根容器设置了固定高度+overflow: scroll，实际产生滚动行为的是这个自定义容器，不是window，所以操作window滚动条无效。
• history.push执行后新页面DOM还未完成挂载渲染，此时直接执行滚动逻辑，找不到对应容器也会失效。
• 额外注意：你现有代码里history.push(/home)路径没有加引号，属于语法错误，实际运行会报错，需要修正为history.push('/home')。

方案1：目标页单独处理（最稳定） #

在目标页面的滚动根容器上绑定ref，组件挂载完成后直接设置容器的滚动位置：

// 目标页面（/home对应页面）代码
import { useEffect, useRef } from 'react';

const Home = () => {
  const scrollContainerRef = useRef(null);

  useEffect(() => {
    // 页面挂载完成后直接重置容器滚动位置
    scrollContainerRef.current?.scrollTo(0, 0);
  }, []);

  return (
    // 绑定ref到你设置了overflow:scroll的根容器上
    <div 
      ref={scrollContainerRef}
      style={{ height: 'calc(100vh - 50px)', overflow: 'scroll' }}
    >
      {/* 页面原有内容 */}
    </div>
  );
};

方案2：全局统一处理（适合多页面跳转置顶场景） #

如果你使用的是React Router v6及以上版本，可以直接用内置的ScrollRestoration组件，全局配置后所有路由跳转都会自动重置滚动位置：

// 项目根路由组件（比如App.jsx）中添加
import { ScrollRestoration } from 'react-router-dom';

function App() {
  return (
    <>
      {/* 原有路由、布局等代码 */}
      <ScrollRestoration
        getKey={(location) => location.pathname}
        // 替换为你项目中页面滚动容器的通用css选择器
        container={() => document.querySelector('.page-scroll-container')}
      />
    </>
  );
}

方案3：临时兼容方案 #

如果不想修改目标页面代码，可以调整跳转逻辑，等新页面DOM渲染完成后直接操作对应容器的滚动：

const handleRedirection = () => {
  history.push('/home');
  // 延迟到下一次事件循环执行，确保新页面DOM已渲染
  setTimeout(() => {
    // 替换为目标页面滚动容器的css选择器
    const container = document.querySelector('.page-scroll-container');
    container?.scrollTo(0, 0);
  }, 0);
};

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