Next.js Link标签跳转后页面无法滚动至顶部问题求助

当你给容器添加overflow-y-auto或overflow-y-scroll类后，该容器会成为独立的滚动上下文，Next.js的Link组件默认的scroll={true}是针对全局window对象的滚动，不会触发自定义滚动容器回到顶部。

方案1：监听路由变化，手动滚动目标容器 #

给需要滚动的内容容器绑定ref，通过Next.js的路由事件监听页面切换，切换后强制滚动容器到顶部。

示例代码：

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

export default function YourPageComponent() {
  const router = useRouter();
  // 给右侧内容容器绑定ref
  const contentContainerRef = useRef(null);

  useEffect(() => {
    // 路由切换完成后执行滚动
    const scrollToTop = () => {
      contentContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
    };

    router.events.on('routeChangeComplete', scrollToTop);
    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', scrollToTop);
  }, [router]);

  return (
    <div className="h-screen flex flex-col bg-neutral-900">
      <div 
        ref={contentContainerRef}
        className="grow max-w-7xl m-4 mb-20 pb-4 overflow-y-scroll"
      >
        {data}
      </div>
    </div>
  );
}

方案2：调整布局，让文档作为全局滚动容器 #

如果布局允许，修改外层容器的高度属性，移除内容容器的overflow-y-scroll，让页面全局滚动，这样Link的默认滚动行为就能生效。

调整后的代码：

// 外层容器从h-screen改为min-h-screen
<div className="min-h-screen flex flex-col bg-neutral-900">
  {/* 移除overflow-y-scroll类 */}
  <div className="grow max-w-7xl m-4 mb-20 pb-4">
    {data}
  </div>
</div>

左侧导航栏的overflow-y-auto可以保留，因为它是独立的滚动容器，不会影响全局滚动逻辑。

方案3：App Router下的处理方式（Next.js 13+） #

如果你使用App Router，可通过usePathname监听路径变化，触发容器滚动：

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

export default function YourLayoutOrPage() {
  const pathname = usePathname();
  const contentContainerRef = useRef(null);

  useEffect(() => {
    contentContainerRef.current?.scrollTo({ top: 0 });
  }, [pathname]);

  return (
    <div className="h-screen flex flex-col bg-neutral-900">
      <div 
        ref={contentContainerRef}
        className="grow max-w-7xl m-4 mb-20 pb-4 overflow-y-scroll"
      >
        {data}
      </div>
    </div>
  );
}

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