NextJS 13页面导航时滚动位置保留问题求助

针对你在服务器组件中使用 <Link> 跳转时滚动位置保留的问题，以下是几个可行的解决方法：

方法一：将 Link 封装到客户端组件中 #

NextJS 13 的服务器组件在处理客户端交互逻辑（如滚动）时存在限制，把 <Link> 放到标记为 'use client' 的组件中，能确保 scroll 属性的行为正常触发：

// app/components/ClientLink.tsx
'use client';

import Link from 'next/link';

type ClientLinkProps = {
  href: string;
  children: React.ReactNode;
};

export default function ClientLink({ href, children }: ClientLinkProps) {
  return (
    <Link href={href} scroll={true}>
      {children}
    </Link>
  );
}

在你的服务器组件中，直接使用这个封装好的 ClientLink 替代原生 <Link> 即可。

方法二：监听路由变化手动触发滚动 #

在根布局中添加一个客户端组件，监听路由路径变化，强制页面滚动到顶部：

// app/components/ScrollToTop.tsx
'use client';

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

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

  useEffect(() => {
    // 页面切换后立即滚动到顶部，可修改behavior为'auto'关闭平滑滚动
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [pathname]);

  return null;
}

然后在根 layout.tsx 中引入该组件：

// app/layout.tsx
import ScrollToTop from './components/ScrollToTop';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ScrollToTop />
        {children}
      </body>
    </html>
  );
}

方法三：排查潜在干扰因素 #

• 检查是否有第三方滚动库（如 react-scroll）或自定义全局样式（如 scroll-behavior 属性）覆盖了默认滚动行为
• 确认页面中没有固定定位的元素导致滚动容器计算错误，若存在嵌套滚动容器，需手动指定滚动目标

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