AntD表格点击分页时滚动至页面顶部实现方案咨询

我来帮你搞定这个需求！其实不用纠结BackTop组件，直接利用AntD分页的onChange事件就能轻松实现点击分页时页面滚动到顶部的效果，而且能完美适配你现有的代码结构。

实现思路 #

Ant Design的Table分页组件自带onChange回调，当用户切换页码时会触发这个事件。我们只需要在这个回调里加入页面滚动到顶部的逻辑，同时保留你原本可能有的分页变更处理逻辑即可。

修改后的完整代码 #

import { Fragment } from 'react';

const GenericTable = props => {
  const { withHeader, pagination, showTable, error } = props;

  // 处理分页切换，同时触发滚动到顶部
  const handlePageChange = (page, pageSize) => {
    // 滚动到页面顶部，支持平滑滚动（可根据需求移除behavior参数）
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });

    // 如果父组件传入了分页的onChange逻辑，要保留执行
    if (pagination?.onChange) {
      pagination.onChange(page, pageSize);
    }
  };

  // 合并分页配置，注入自定义的onChange逻辑
  const mergedPagination = {
    ...pagination,
    showTotal,
    onChange: handlePageChange
  };

  return (
    <Fragment>
      {withHeader && <TableHeader {...props} />}
      {showTable && (
        <CustomTable
          {...props}
          pagination={mergedPagination}
        />
      )}
      <TableFooter>{<Error>{error}</Error>}</TableFooter>
    </Fragment>
  );
};

GenericTable.defaultProps = {
  pagination: {
    pageSize: 10,
  },
};

代码说明 #

• handlePageChange函数：先执行window.scrollTo()让页面滚动到顶部，behavior: 'smooth'是可选的平滑滚动效果，不需要的话可以删掉这一行。
• 兼容原有逻辑：如果你的pagination参数原本就带有onChange回调（比如用来请求新页数据），我们会先执行滚动，再调用原有的回调，不会覆盖你的业务逻辑。
• 合并分页配置：把自定义的onChange和你传入的分页配置合并后，再传给CustomTable，确保所有分页配置都生效。

如果你一定要用BackTop组件的话，其实可以给BackTop加一个ref，然后在handlePageChange里调用ref.current?.scrollToTop()，但上面的方法更直接，不需要额外引入组件。

内容的提问来源于stack exchange，提问作者Afaq Ahmed Khan