Next.js 14 App Router返回导航时如何平滑可靠恢复滚动位置？

你的问题核心是Next.js App Router的默认滚动行为会覆盖你通过useEffect设置的滚动位置，而setTimeout的延迟方案又存在闪烁或不稳定的问题。以下是几个关键优化步骤，能实现平滑且可靠的滚动恢复：

1. 改用useLayoutEffect替代useEffect #

useLayoutEffect会在DOM更新完成后立即执行（早于浏览器绘制页面），能避免先滚动到顶部再恢复的闪烁问题，执行时机比useEffect更适合处理滚动恢复：

import { useLayoutEffect } from 'react';

export default function Page({ id }) {
  // 恢复滚动位置
  useLayoutEffect(() => {
    const scrollPos = Number(sessionStorage.getItem(`scrollPos-${id}`));
    if (!isNaN(scrollPos)) {
      window.scrollTo({
        top: scrollPos,
        behavior: 'smooth' // 可选，开启平滑滚动
      });
      sessionStorage.removeItem(`scrollPos-${id}`);
    }
  }, [id]);

  // 离开页面时保存滚动位置
  useLayoutEffect(() => {
    return () => {
      sessionStorage.setItem(`scrollPos-${id}`, window.scrollY.toString());
    };
  }, [id]);

  // ...其他页面逻辑
}

2. 禁用浏览器/Next.js的默认滚动恢复 #

在根布局（app/layout.tsx）中给<html>标签添加scrollRestoration="manual"，让浏览器不自动处理滚动恢复，避免和自定义逻辑冲突：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" scrollRestoration="manual">
      <body>{children}</body>
    </html>
  );
}

3. 为不同页面实例单独保存滚动位置 #

如果你的页面是动态路由（比如/posts/[id]），给滚动位置的存储key加上页面的id参数，避免不同页面的滚动位置互相覆盖，确保返回对应页面时恢复正确位置（已包含在上述代码中）。

额外优化：处理客户端导航的边界情况 #

如果应用中有频繁的客户端导航，可通过Next.js的useRouter监听路由变化，确保任何导航离开当前页面时都能保存滚动位置：

import { useRouter } from 'next/navigation';
import { useLayoutEffect } from 'react';

export default function Page({ id }) {
  const router = useRouter();

  useLayoutEffect(() => {
    const handleRouteChange = () => {
      sessionStorage.setItem(`scrollPos-${id}`, window.scrollY.toString());
    };

    router.events.on('routeChangeStart', handleRouteChange);
    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [id, router]);

  // ...恢复滚动的逻辑
}

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