Next.js中Link组件跳转新页面滚动到顶部失效问题求助

针对动态路由（如/products/product/[slug]）跳转后页面保持原滚动位置的问题，以下是几种可靠的解决方法：

方法1：全局在_app.js中统一处理（推荐） #

在pages/_app.js中添加全局路由事件监听，覆盖所有路由场景，包括动态路由：

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

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

  useEffect(() => {
    const handleRouteChange = () => {
      window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
    };

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

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

export default MyApp;

说明：之前在单个商品详情组件中添加监听，可能因为组件挂载时机晚于路由完成事件，导致滚动代码没触发。全局处理能确保每次路由跳转完成后，无论是什么路由类型，都执行滚动到顶部。

方法2：显式给Link组件设置scroll={true} #

Next.js的Link默认会自动滚动到顶部，但动态路由场景下偶尔会出现失效情况，显式设置属性强制启用：

import Link from 'next/link';

// 商品列表页的跳转Link
<Link href={`/products/product/${product.slug}`} scroll={true}>
  <span>查看详情</span>
</Link>

方法3：在详情组件中用router.asPath作为依赖 #

如果需要在单个组件内处理，用router.asPath替代pathname作为依赖——因为动态路由的pathname固定为/products/product/[slug]，不会随slug变化，而asPath是实际访问的URL（如/products/product/abc123），能准确捕捉路由变化：

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

const ProductDetails = () => {
  const router = useRouter();

  useEffect(() => {
    // 用requestAnimationFrame确保DOM渲染完成后再滚动
    requestAnimationFrame(() => {
      window.scrollTo(0, 0);
    });
  }, [router.asPath]);

  return (
    <>
      {/* 商品详情内容 */}
    </>
  );
};

export default ProductDetails;

之前方法无效的原因 #

• 尝试1：单个组件内监听routeChangeComplete时，组件可能还未挂载，事件监听未注册，导致路由完成时没触发滚动。
• 尝试2：依赖router.pathname，动态路由的pathname不会随slug更新，useEffect只执行一次，后续跳转不触发。
• 尝试3：空依赖数组导致useEffect仅在组件首次挂载时执行，同一组件不同slug的跳转不会重新触发。
• 尝试4：document.getElementById("#top")写法错误，应去掉#，改为document.getElementById("top")，否则无法找到目标元素。

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