Next.js 13+Sanity v3博客返回首页自动滚动到顶部问题求助

针对App Router（Next.js 13+） #

1. 启用内置滚动恢复组件 #

在app/layout.js（或.tsx）中导入并添加ScrollRestoration组件，它会自动处理客户端导航时的滚动位置恢复：

import { ScrollRestoration } from 'next/navigation';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ScrollRestoration />
      </body>
    </html>
  );
}

2. 确保使用Next.js的Link组件 #

所有页面跳转必须使用next/link导出的Link组件，避免使用原生<a>标签——原生标签会触发全页刷新，直接丢失滚动位置记忆：

import Link from 'next/link';

// 正确用法
<Link href="/blog/your-post">查看文章</Link>

// 错误用法（会导致滚动丢失）
<a href="/blog/your-post">查看文章</a>

3. 自定义滚动恢复（内置组件失效时） #

如果内置组件不生效，可通过sessionStorage手动存储和恢复滚动位置，在首页组件（如app/page.js）中添加以下逻辑：

import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function Home() {
  const pathname = usePathname();

  // 滚动时存储位置到sessionStorage
  useEffect(() => {
    const saveScrollPos = () => {
      sessionStorage.setItem(`scroll_${pathname}`, window.scrollY.toString());
    };
    window.addEventListener('scroll', saveScrollPos);
    return () => window.removeEventListener('scroll', saveScrollPos);
  }, [pathname]);

  // 页面加载时恢复滚动位置
  useEffect(() => {
    const savedPos = sessionStorage.getItem(`scroll_${pathname}`);
    if (savedPos) window.scrollTo(0, parseInt(savedPos, 10));
  }, [pathname]);

  // 首页原有内容...
  return (
    <div>
      {/* 你的博客列表等内容 */}
    </div>
  );
}

针对Pages Router（若模板采用此架构） #

在pages/_app.js（或.tsx）中添加ScrollRestoration组件即可：

import { ScrollRestoration } from 'next/app';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ScrollRestoration />
    </>
  );
}

额外排查项 #

• 检查是否存在自定义全局滚动事件，比如某些代码强制在页面加载时window.scrollTo(0, 0)，这类逻辑会覆盖滚动恢复行为。
• 若使用router.push/router.replace跳转，确认未传递scroll: false参数——该参数会禁用默认滚动处理。

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