点击分页按钮后实现平滑滚动到顶部报错的解决咨询

错误原因 #

你定义了pageTopRef但未将其绑定到任何实际DOM元素上，导致pageTopRef.current为null，调用scrollIntoView时触发类型错误。

解决方案 #

有两种简单有效的实现方式：

方案一：正确绑定ref到页面顶部元素 #

在页面最顶部的容器元素上绑定pageTopRef，确保ref能获取到有效DOM节点：

1. 修改return中的最外层容器，添加ref属性：

return (
  <div ref={pageTopRef}> {/* 绑定ref到顶部容器 */}
    <ul>
      <Container>
        <Grid container spacing={1}>
          {Myjson.slice(firstpostindex, lastPostIndex).map((item) => {
            return (
                   // 你的卡片渲染代码
            );
          })}
        </Grid>
      </Container>
      <Stack alignItems="center" justifyContent="center">
        <Pagination
          count={Math.ceil(Myjson.length / postsPerpage)}
          variant="outlined"
          color="warning"
          sx={{ mt: 4, ml: -11 }}
          onChange={handleChange}
        />
      </Stack>
    </ul>
  </div>
);

2. 保持原handleChange函数不变即可，此时pageTopRef.current能正确获取DOM元素，执行平滑滚动。

方案二：直接滚动到文档顶部（无需ref） #

如果只需滚动到页面最顶端，可省略ref，直接使用window.scrollTo：

修改handleChange函数：

const handleChange = (event, value) => {
  setCurrentpage(value);
  window.scrollTo({ top: 0, behavior: "smooth" });
};

这种方式更简洁，无需额外绑定ref，适合直接滚动到浏览器顶部的场景。

额外提示 #

若页面存在固定定位的头部，想要滚动到内容区域顶部而非浏览器最顶端，可调整scrollTo的top值：

// 假设头部元素id为header
window.scrollTo({ top: document.getElementById('header').offsetHeight, behavior: "smooth" });

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