ReactJS实现页面跳转无滚动直接定位顶部的方案问询

你之前用useEffect(() => window.scrollTo(0, 0), [])仍有滚动行为，大概率是浏览器默认滚动恢复、scrollTo配置未明确指定无动画，或者触发时机不对导致的。试试下面的方案：

• 明确指定scrollTo的无动画行为
  直接调用scrollTo时，显式设置behavior: 'auto'（虽为默认值，但部分场景下浏览器会被其他配置干扰，明确声明更稳妥）：

  window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
  

• 路由切换时触发（适配react-router场景）
  如果是点击侧边导航切换路由的场景，不要仅在组件挂载时触发，要监听路由路径变化：

  import { useLocation } from 'react-router-dom';
  import { useEffect } from 'react';
  
  function Layout() {
    const location = useLocation();
  
    useEffect(() => {
      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
    }, [location.pathname]); // 路由路径变化时执行
  
    return (
      // 你的侧边导航和页面内容结构
    );
  }
  

• 禁用浏览器自动滚动恢复
  现代浏览器默认会在路由切换时恢复之前的滚动位置，这会干扰自定义滚动逻辑。在react-router的BrowserRouter中添加scrollRestoration="manual"禁用该特性：

  import { BrowserRouter } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter scrollRestoration="manual">
        {/* 你的路由内容 */}
      </BrowserRouter>
    );
  }
  

• 用useLayoutEffect代替useEffect
  如果组件渲染后还有内容加载导致滚动位置偏移，用useLayoutEffect同步执行滚动操作——它会在DOM更新完成后立即触发，比useEffect更早执行，能避免后续内容加载带来的滚动：

  import { useLayoutEffect } from 'react';
  
  // ...
  useLayoutEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
  }, [location.pathname]);
  

把这些方案组合使用，就能实现像参考页面那样点击侧边导航直接跳转到顶部、无滚动动画的效果。

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