为何window.scrollTo仅初始加载触发？组件导航后滚动失效咨询

你的滚动功能在直接加载组件时正常，但从其他页面导航过来就失效，核心原因主要有这几个：

• useEffect仅触发一次：你的useEffect依赖是空数组[]，这意味着它只会在组件首次挂载时执行一次。当你从其他页面导航回这个组件时，如果组件没有被卸载（比如React Router会复用组件实例），useEffect不会再次触发，自然不会执行滚动操作。
• 路由滚动恢复干扰：大多数前端路由库（比如React Router）默认会在路由切换时恢复之前的滚动位置。你的scrollTo操作可能早于路由的滚动恢复逻辑，结果被浏览器的默认行为覆盖了。
• DOM布局未稳定：导航切换时，页面DOM可能还在异步更新中，此时ref.current.offsetTop的计算可能不准确，导致滚动到错误位置（或者看起来完全没生效）。

根据上述原因，给你几个针对性的修复方案，按实用性排序：

1. 监听路由变化，触发滚动（最常用） #

如果使用React Router，借助useLocation钩子监听路由路径变化，每次路由切换时重新执行滚动：

import { useLocation } from 'react-router-dom';

const scrollToRef = (ref) => {
  if (ref.current) { // 先确保ref存在，避免空指针错误
    window.scrollTo({
      top: ref.current.offsetTop,
      behavior: 'smooth' // 可选，添加平滑滚动提升体验
    });
  }
};

const OrderList = props => {
  const topRef = useRef(null);
  const location = useLocation(); // 获取当前路由信息

  useEffect(() => {
    scrollToRef(topRef);
  }, [location]); // 依赖改为location，路由变化就触发滚动

  return (
    <>
      <div style={{height:1500}} />
      <div ref={topRef} id="top">I wanna see.</div>
    </>
  );
}

2. 禁用路由的默认滚动恢复 #

如果路由的滚动恢复是主要干扰源，可以在路由配置里禁用这个行为（以React Router v6为例）：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  // 你的路由配置项
], {
  scrollRestoration: false, // 禁用默认滚动恢复功能
});

// 在根组件中渲染路由
<RouterProvider router={router} />

这样路由切换时不会自动恢复滚动位置，你的自定义滚动操作就能正常生效了。

3. 改用useLayoutEffect确保DOM已更新 #

如果是DOM布局未稳定导致的问题，可以把useEffect换成useLayoutEffect，它会在DOM更新完成后同步执行，能保证offsetTop的计算完全准确：

import { useLayoutEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const scrollToRef = (ref) => {
  if (ref.current) {
    window.scrollTo(0, ref.current.offsetTop);
  }
};

const OrderList = props => {
  const topRef = useRef(null);
  const location = useLocation();

  useLayoutEffect(() => {
    scrollToRef(topRef);
  }, [location]);

  return (
    <>
      <div style={{height:1500}} />
      <div ref={topRef} id="top">I wanna see.</div>
    </>
  );
}

• 始终在scrollToRef里检查ref.current是否存在，避免空指针报错；
• 如果不需要平滑滚动，可以去掉behavior: 'smooth'，提升执行性能；
• 若组件嵌套层级较深，也可以考虑给滚动目标元素添加id，直接用document.getElementById('top')获取元素，替代ref（不过ref的方式更React化）。

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