React页面切换后滚动位置未重置问题的修复方法

直接在共用的Layout组件里添加路由监听逻辑，每次页面切换时自动滚动到顶部，这是最简洁的方案：

实现步骤 #

1. 确保项目使用了React Router（绝大多数React路由场景都会用到它），在Layout组件中导入useLocation和useEffect
2. 监听路由路径变化，每次切换时执行滚动到顶部的操作

修改后的Layout组件代码：

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";

function Layout({ children }) {
  const location = useLocation();

  useEffect(() => {
    // 路由切换时滚动到页面顶部，behavior可选，用来添加平滑滚动效果
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }, [location.pathname]); // 依赖路由路径，路径变化时触发执行

  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
}

export default Layout;

之前方案的问题说明 #

• 给每个页面单独加滚动条会出现双滚动条，是因为页面容器和body同时开启了滚动属性，导致两个可滚动区域并存
• 给body设置overflow:hidden会直接禁用全局滚动，违背了正常页面需要滚动查看内容的需求

无React Router场景的替代方案 #

如果项目用了其他路由方案，可在页面跳转的触发逻辑里直接调用window.scrollTo(0, 0)，比如点击跳转按钮时同步执行滚动操作。

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