NextJS中点击Link跳转后页面停留在中部，如何回到顶部？

问题场景 #

使用Next.js的<Link>组件跳转页面时，页面始终停留在中部而非顶部，代码示例：

<Link href={`/products/${id}`} key={id}>
   <a>
      {/* 其他组件内容 */}
   </a>
</Link>

已尝试添加scroll={true}/scroll={false}、设置html, body { height: 100%; }、scroll-behavior: smooth等方案均无效，暂时用原生<a>标签但会触发页面重载。

可行解决方案 #

1. 在目标页面监听路由变化强制滚动到顶部 #

在跳转后的目标页面（如/products/[id]）中添加如下逻辑，监听路由切换完成事件，强制滚动到页面顶部：

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

export default function ProductDetailPage() {
  const router = useRouter();

  useEffect(() => {
    const scrollToTop = () => window.scrollTo(0, 0);
    // 路由切换完成后执行滚动
    router.events.on('routeChangeComplete', scrollToTop);
    
    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', scrollToTop);
  }, [router]);

  // 页面其余内容
  return <div>产品详情内容...</div>;
}

2. 封装自定义Link组件统一处理滚动 #

如果多个页面都存在该问题，可以封装一个自带滚动到顶部逻辑的自定义Link组件，避免重复代码：

// components/ScrollToTopLink.js
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function ScrollToTopLink({ href, children, ...props }) {
  const router = useRouter();

  useEffect(() => {
    const scrollToTop = () => window.scrollTo(0, 0);
    router.events.on('routeChangeComplete', scrollToTop);
    return () => router.events.off('routeChangeComplete', scrollToTop);
  }, [router]);

  return (
    <Link href={href} {...props}>
      {children}
    </Link>
  );
}

使用时替换原<Link>：

<ScrollToTopLink href={`/products/${id}`} key={id}>
   <a>
      {/* 其他组件内容 */}
   </a>
</ScrollToTopLink>

3. 检查滚动上下文是否为window #

若页面中存在自定义滚动容器（如设置了overflow: auto的父元素），则window.scrollTo不会生效，需找到对应滚动容器并设置其滚动位置：

// 假设滚动容器id为main-content
const scrollContainer = document.getElementById('main-content');
if (scrollContainer) scrollContainer.scrollTop = 0;

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