Next.js传统路由分页跳转后停留在底部，如何修复？

针对你使用Next.js 13.2.3（传统pages路由）遇到的分页跳转后页面停留在底部的问题，可尝试以下几种解决方案：

方案一：在_app.js中全局监听路由变化 #

Next.js的pages路由默认会保留路由切换前的滚动位置，你可以通过全局监听路由完成事件来强制回到顶部：

// 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, behavior: 'smooth' });
      // 无需动画可改用：window.scrollTo(0, 0);
    };

    // 监听路由切换完成事件
    router.events.on('routeChangeComplete', handleRouteChange);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);

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

export default MyApp;

方案二：检查自定义滚动容器 #

如果页面的滚动载体不是window，而是某个设置了overflow: auto的自定义容器，window.scrollTo不会生效，需要定位到该容器并修改其滚动位置：

// 假设滚动容器的id为"scroll-container"
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function PostList() {
  const router = useRouter();

  useEffect(() => {
    const scrollContainer = document.getElementById('scroll-container');
    if (scrollContainer) {
      scrollContainer.scrollTop = 0;
    }
  }, [router.asPath]); // 监听当前路由变化

  return <div id="scroll-container" className="post-list">{/* 列表内容 */}</div>;
}

方案三：禁用默认滚动行为并手动控制 #

如果Next.js默认的滚动逻辑干扰了自定义需求，可以在分页的Link组件中禁用默认滚动，再手动触发滚动操作：

// 分页组件示例
import Link from 'next/link';
import { useRouter } from 'next/router';

const Pagination = ({ currentPage, totalPages }) => {
  const router = useRouter();

  const handlePageSwitch = () => {
    // 延迟执行确保路由切换完成后再滚动
    setTimeout(() => {
      window.scrollTo(0, 0);
    }, 0);
  };

  return (
    <div className="pagination">
      {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
        <Link
          key={page}
          href={`/posts?page=${page}`}
          scroll={false} // 禁用Next.js默认滚动行为
          onClick={handlePageSwitch}
        >
          {page}
        </Link>
      ))}
    </div>
  );
};

export default Pagination;

方案四：结合DOM加载状态执行滚动 #

如果页面包含异步加载的内容，提前执行滚动可能因内容未渲染导致效果不明显，可监听页面加载完成事件：

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

function MyPage() {
  const router = useRouter();

  useEffect(() => {
    const scrollToTopOnLoad = () => {
      if (document.readyState === 'complete') {
        window.scrollTo(0, 0);
      }
    };

    document.addEventListener('DOMContentLoaded', scrollToTopOnLoad);
    return () => {
      document.removeEventListener('DOMContentLoaded', scrollToTopOnLoad);
    };
  }, [router.asPath]);

  return {/* 页面内容 */};
}

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