如何在Next.js中禁用浏览器后退/前进导航时的滚动恢复

由于你未通过Link组件或router方法触发导航，仅使用浏览器原生后退/前进按钮操作，可通过以下两种方式实现需求：

方法一：用浏览器原生API全局禁用滚动恢复 #

直接修改浏览器的history.scrollRestoration属性，阻止自动恢复滚动位置。在_app.js中添加如下逻辑：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 禁用浏览器默认的滚动恢复行为
    history.scrollRestoration = 'manual';
  }, []);

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

export default MyApp;

设置后，所有通过浏览器前进/后退触发的导航，都不会自动恢复之前的滚动位置。

方法二：结合Next.js路由事件强制控制滚动 #

若需要针对特定路由做精细控制，可监听Next.js的路由切换事件，在导航完成后强制滚动到指定位置（比如顶部）：

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

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

  useEffect(() => {
    const handleRouteFinish = () => {
      // 导航完成后强制滚动到页面顶部
      window.scrollTo(0, 0);
    };

    // 监听所有路由切换完成事件（含浏览器前进/后退触发的导航）
    router.events.on('routeChangeComplete', handleRouteFinish);

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

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

export default MyApp;

该方法会覆盖Next.js默认的滚动恢复逻辑，每次路由切换后都强制重置滚动位置。

补充说明 #

• 方法一为全局生效，适合所有页面都需要禁用滚动恢复的场景；
• 方法二可通过判断router.pathname实现路由级别的自定义控制，灵活性更高。

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