求助：React分页组件切换页面时实现滚动到顶部

这里有两种实用方案可以实现你的需求：

方案一：点击分页按钮时直接触发滚动 #

直接在分页按钮的点击事件中，先更新页码，再调用浏览器滚动API回到顶部，还可添加平滑滚动效果提升体验。

修改后的代码如下：

const MAX_BTN = 9;
const MAX_BTN_LEFT = (MAX_BTN - 1) / 2;

const Pagination = ({items, limit = 20, page, setPage}) => {
  const pages = items !== null && Math.ceil(items.total_results / limit);
  const startBtn = Math.max(page - MAX_BTN_LEFT, 1);

  const handlePageChange = (value) => {
    setPage(value);
    // 滚动到顶部，behavior: 'smooth' 开启平滑滚动，不需要可删除
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  return (
    <ul className="pagination">
      {Array(Math.min(MAX_BTN, pages)).fill()
        .map((_, i) => i + startBtn)
        .map(value => (
          <li key={value}>
            <button onClick={() => handlePageChange(value)}>{value}</button>
          </li>
        ))
      }
    </ul>
  )
}

export default Pagination;

方案二：监听页码变化自动滚动 #

如果希望**只要页码发生变化（无论通过分页按钮还是其他方式触发）**都自动滚动到顶部，可以用React的useEffect钩子监听page状态变化：

修改后的代码如下：

import { useEffect } from 'react'; // 需导入useEffect

const MAX_BTN = 9;
const MAX_BTN_LEFT = (MAX_BTN - 1) / 2;

const Pagination = ({items, limit = 20, page, setPage}) => {
  const pages = items !== null && Math.ceil(items.total_results / limit);
  const startBtn = Math.max(page - MAX_BTN_LEFT, 1);

  // 监听page变化，自动滚动到顶部
  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }, [page]); // 依赖项为page，page更新时执行

  return (
    <ul className="pagination">
      {Array(Math.min(MAX_BTN, pages)).fill()
        .map((_, i) => i + startBtn)
        .map(value => (
          <li key={value}>
            <button onClick={() => setPage(value)}>{value}</button>
          </li>
        ))
      }
    </ul>
  )
}

export default Pagination;

补充说明 #

• window.scrollTo({top: 0}) 是核心API，直接让页面滚动到顶部；
• behavior: 'smooth' 为可选参数，添加后会有平滑滚动动画，不需要可删除该属性，改为window.scrollTo(0, 0)；
• 若页面有固定头部导航栏，可将top值设为导航栏高度（如top: 80，假设导航栏高度为80px），避免内容被导航栏遮挡。

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