React电商应用页面跳转默认回顶部实现方案（无需scrollToTop）

方法1：全局锚点+带Hash的路由链接 #

这是最贴近原生HTML锚点思路的方案：

• 在所有页面的最顶部（比如你的全局布局组件的最开头）添加一个不占空间的锚点元素：

  <div id="top" style={{ position: 'absolute', top: 0, left: 0, height: 0, width: 0 }}></div>
  

• 使用React Router的Link组件跳转时，在路径末尾拼接#top：

  <Link to="/product#top">商品列表</Link>
  <Link to="/checkout#top">结算页面</Link>
  

  跳转后浏览器会自动滚动到id="top"的位置，完全依赖原生锚点机制，无需编写任何滚动相关的JS代码。

方法2：配合React Router的滚动配置（v6版本适用） #

如果不想手动添加锚点元素，也可以通过React Router的配置触发原生滚动行为：

• 创建路由时开启scrollRestoration配置：

  import { createBrowserRouter, RouterProvider } from 'react-router-dom';
  
  const router = createBrowserRouter(
    [
      { path: '/', element: <Home /> },
      { path: '/product/:id', element: <ProductDetail /> },
      // 其他路由配置
    ],
    {
      scrollRestoration: 'auto'
    }
  );
  
  function App() {
    return <RouterProvider router={router} />;
  }
  

• 之后在Link里直接使用#（对应页面顶部）代替自定义锚点：

  <Link to="/product#">商品列表</Link>
  

  这种方式不需要额外添加元素，直接利用浏览器对#的默认滚动逻辑，同样能实现跳转后回到顶部。

注意事项 #

• 若使用React Router v5或更早版本，可在路由切换完成后，通过useEffect监听路由变化，执行window.location.hash = '#top'触发锚点滚动，核心还是依赖原生机制。
• 确保页面没有覆盖原生滚动的CSS（比如body { overflow: hidden; }），否则锚点滚动可能失效。

内容的提问来源于stack exchange，提问作者Art Alfred Bernales