换页时滚动到顶部

Question

我有一个分页组件（React）。更改页面时，我需要将滚动条移动到顶部。有人可以帮助我吗？

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);

  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;

Answer 1

可以用一个函数返回顶部：

  const handlePageChange = value => {
    window.scrollTo(0, 0);
    setPage(value);
  }

在你的按钮中调用它：

  ...
  <li key={value}>
    <button onClick={() => handlePageChange(value)}>{value}</button>
  </li>

Answer 2

点击链接时使用以下方法调用浏览器窗口对象

window.scrollTo(0, 0);