Next.js Link跳转返回页面未置顶的优雅解决方案咨询

嘿，这个问题我做项目的时候也碰到过，确实挺影响体验的——明明返回了上一页，却停留在之前滚动的位置，不是我们想要的从顶部加载的效果。不用每次手动调用scrollTop，这里有几个更优雅的思路：

1. 全局路由监听+平滑滚动到顶部（App Router） #

如果用的是Next.js 13+的App Router，直接在根布局里做全局处理就好，一次配置全网站生效：

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

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

  useEffect(() => {
    // 路径变化时平滑滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [pathname]);

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

这个方案的好处是全局统一处理，不用在每个跳转组件里重复写逻辑，而且behavior: 'smooth'还能加个平滑过渡，比生硬的scrollTop体验更好。

2. 禁用浏览器的自动滚动恢复 #

浏览器本身有个history.scrollRestoration属性，默认是auto，会自动保存并恢复页面的滚动位置。我们可以把它改成manual，直接从根源上禁用这个行为：

'use client';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  useEffect(() => {
    // 关闭浏览器自动恢复滚动位置
    const originalRestoration = history.scrollRestoration;
    history.scrollRestoration = 'manual';

    // 组件卸载时恢复默认设置，避免影响其他场景
    return () => {
      history.scrollRestoration = originalRestoration;
    };
  }, []);

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

这个方案更底层，配合上面的路由滚动效果，就能确保每次页面加载（包括返回）都从顶部开始。

3. 自定义跳转逻辑（针对特定组件） #

如果你不想全局生效，只想让Milestone组件的跳转触发滚动到顶部，可以在你的自定义组件里强化跳转逻辑：

'use client';
import { useRouter } from 'next/navigation';

const Milestone = props => {
  const { path, disabled, index, ...rest } = props;
  const router = useRouter();

  const handleNavigate = () => {
    router.push(path);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (disabled) return <MilestoneCheck disabled />;
  return (
    <button onClick={handleNavigate} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
      <MilestoneCheck {...rest} />
    </button>
  );
};

这个方案适合只需要特定组件生效的场景，把原有的Link替换成按钮+手动路由跳转，精准控制滚动行为。

为什么会出现这个问题？ #

简单说就是浏览器的默认行为：当你浏览页面并滚动后，浏览器会把当前的滚动位置存在历史记录里，当你点击返回按钮时，就会自动恢复到之前的滚动位置。Next.js默认保留了这个行为，所以就出现了你遇到的情况。

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