Next.js页面跳转返回后无法恢复原滚动位置问题求助

• 确保使用next/link进行客户端跳转
  普通<a>标签会触发页面硬刷新，导致滚动位置丢失，必须用Next.js的<Link>组件实现无刷新跳转：

  import Link from 'next/link';
  
  // 正确写法
  <Link href="/details">查看更多信息</Link>
  
  // 错误写法（会刷新页面）
  <a href="/details">查看更多信息</a>
  

• 手动管理滚动位置（实验性配置无效时）
  在首页组件中通过sessionStorage记录和恢复滚动位置：

  import { useEffect } from 'react';
  
  export default function Home() {
    useEffect(() => {
      // 页面加载时恢复滚动位置
      const savedScroll = sessionStorage.getItem('homeScrollPosition');
      if (savedScroll) {
        window.scrollTo(0, parseInt(savedScroll, 10));
        sessionStorage.removeItem('homeScrollPosition');
      }
  
      // 离开页面时保存当前滚动位置
      const saveScroll = () => {
        sessionStorage.setItem('homeScrollPosition', window.scrollY.toString());
      };
  
      window.addEventListener('beforeunload', saveScroll);
      return () => window.removeEventListener('beforeunload', saveScroll);
    }, []);
  
    return (
      {/* 首页内容 */}
      <div>首页内容区域</div>
    );
  }
  

• 排查全局滚动重置代码
  检查项目中是否存在强制滚动到顶部的代码（比如window.scrollTo(0, 0)），这类代码可能在页面加载时覆盖滚动恢复逻辑，需要移除或调整执行时机。

• App Router 专属处理方案
  若使用App Router，需在根布局中结合路由事件管理滚动位置：

  'use client';
  import { useEffect } from 'react';
  import { useRouter } from 'next/navigation';
  
  export default function RootLayout({ children }) {
    const router = useRouter();
  
    useEffect(() => {
      // 路由跳转完成后恢复滚动位置
      const restoreScroll = () => {
        const scrollPos = sessionStorage.getItem(`scroll-${window.location.pathname}`);
        if (scrollPos) window.scrollTo(0, parseInt(scrollPos, 10));
      };
  
      // 离开页面时保存当前滚动位置
      const saveScroll = () => {
        sessionStorage.setItem(`scroll-${window.location.pathname}`, window.scrollY.toString());
      };
  
      router.events.on('routeChangeComplete', restoreScroll);
      window.addEventListener('beforeunload', saveScroll);
  
      return () => {
        router.events.off('routeChangeComplete', restoreScroll);
        window.removeEventListener('beforeunload', saveScroll);
      };
    }, [router]);
  
    return (
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    );
  }
  

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