Reactjs 我想获得滚动位置并移动它

我正在使用react和Typescript。
当我按下一个按钮时，我想转到下一个按钮。
例如，当我按下蓝色框组件中的按钮时，我希望它转到下面的红色框组件。另外，我不想使用a标记。我一直在使用codesandbox来实现这一点，但我不知道如何移动滚动位置。

---

也许您可以使用

id

，但不确定您想要实现什么。试试这个：

 <Box height="400px" background="blue.100">
        <Button as="a" href="#red"></Button>
      </Box>
      <Box height="400px" background="red.100">
        <Button id="red"></Button>
      </Box>

---

这样，您就不需要维护ref。

只需使用锚点进行跳跃：

  <Box height="400px" background="blue.100">
    <a href="#red"><Button></Button></a>
  </Box>
  <Box height="400px" background="red.100" id="red">
    <Button></Button>
  </Box>

如果希望平滑滚动（）：

constonclick=（e:any）=>{
document.querySelector（e）.scrollIntoView({
行为：“平稳”
});
};
返回(
onClick（#红色“}>

我不想使用标签，因为它会更改URL，我想向下移动滚动位置。第二种方法根本不会修改URL。但实际上做得很好，我甚至没有尝试答案，而是直接拒绝它。；）非常感谢。我已经解决了。当我将onClick的参数（e:any）更改为（e:string）时，出现了一个错误。是否有解决方案？错误方法）ParentNode.querySelector（选择器：字符串）：元素| null（+2个重载）返回第一个元素，该元素是与选择器匹配的节点的后代。对象可能为“null”。ts（2531）@ryuma您可能应该将其添加到问题正文中，但由于只需向下滚动，它就会实现您的预期。

  const onClick = (e: any) => {
    document.querySelector(e).scrollIntoView({
      behavior: "smooth"
    });
  };
  return (
    <Box>
      <Box height="400px" background="blue.100">
        <Button onClick={(e) => onClick("#red")}></Button>
      </Box>
      <Box height="400px" background="red.100" id="red">
        <Button></Button>
  </Box>