React按钮点击跳转页面后自动滚动到底部的修复方案

你遇到的情况是点击按钮跳转至新页面后，页面自动滚动到底部而非顶部，以下是几种针对性的修复方案：

方案一：直接在跳转函数中强制滚动到顶部 #

如果你的handleSeeMoreClick是通过window.location.href实现跳转，可以修改函数，在跳转后强制页面滚动到顶部：

const handleSeeMoreClick = (path) => {
  window.location.href = path;
  // 用setTimeout确保页面跳转后执行滚动
  setTimeout(() => window.scrollTo(0, 0), 0);
};

方案二：在目标页面的加载生命周期中处理滚动 #

如果是React项目，在/project对应的组件中添加useEffect钩子，组件挂载时自动滚动到顶部：

import { useEffect } from 'react';

function ProjectPage() {
  useEffect(() => {
    // 平滑滚动到顶部，也可以直接用window.scrollTo(0, 0)
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  // 页面其他内容
  return <div>Project Page Content</div>;
}

方案三：React Router 环境下的全局配置（v6+） #

如果使用React Router，推荐全局配置路由切换时自动滚动到顶部：

1. 在根组件（如App.js）中引入useLocation和useEffect：

import { useEffect } from 'react';
import { useLocation, Routes, Route } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <Routes>
      <Route path="/project" element={<ProjectPage />} />
      {/* 其他路由 */}
    </Routes>
  );
}

2. 或者直接使用React Router内置的ScrollRestoration组件，它会自动处理路由切换时的滚动恢复：

import { ScrollRestoration, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <>
      <Routes>
        <Route path="/project" element={<ProjectPage />} />
        {/* 其他路由 */}
      </Routes>
      <ScrollRestoration />
    </>
  );
}

方案四：原生JS全局监听页面加载 #

如果是普通HTML/JS项目，在全局脚本中添加页面加载完成后的滚动逻辑：

window.addEventListener('load', () => {
  window.scrollTo(0, 0);
});

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