如何解决Next.js路由跳转时保留共享组件之前滚动位置的问题

问题原因 #

Next.js默认会在客户端路由跳转时保留当前页面的滚动位置，因此你在页面底部跳转到新路由时，会继承之前的滚动高度，直接显示在页面底部位置。

修复方案 #

方案1：全局配置（通用推荐，所有路由跳转都生效） #

Pages Router版本（项目有pages目录的情况）

修改pages/_app.js文件，添加路由跳转监听事件，每次路由跳转完成后自动滚动到顶部：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // 路由跳转完成后触发的回调
    const handleRouteChange = () => {
      window.scrollTo(0, 0)
      // 如果你用了GSAP ScrollTrigger，建议加这行避免滚动动画异常
      // ScrollTrigger.refresh()
    }
    // 绑定路由监听事件
    router.events.on('routeChangeComplete', handleRouteChange)
    // 组件卸载时解绑事件，避免内存泄漏
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

App Router版本（项目有app目录的情况）

修改app/layout.js根布局文件，监听路径变化自动滚动到顶部：

'use client'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

export default function RootLayout({ children }) {
  const pathname = usePathname()

  useEffect(() => {
    window.scrollTo(0, 0)
    // GSAP ScrollTrigger修复逻辑同上
    // ScrollTrigger.refresh()
  }, [pathname])

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

方案2：单链接配置（仅指定链接跳转时回顶） #

如果不需要所有跳转都回顶，只需要联系我们的链接跳转时回顶，将原有原生a标签替换为Next.js内置的Link组件，开启滚动重置属性即可：

// 先引入Link组件
import Link from 'next/link'

// 替换原有联系我们跳转代码
<Link href="/你的联系我们页面路径" scroll={true}>
  联系我们
</Link>

注意：Next.js 13+版本的Link组件默认已经开启scroll={true}，低版本需要手动添加该属性

额外建议 #

站内路由跳转不要使用原生a标签，原生a标签会触发整页刷新，性能远低于Next.js的Link组件客户端路由跳转逻辑。

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