scrollToTop 在反应中不起作用（codesandbox）

【问题标题】：scrollToTop doesn't work in react (codesandbox)scrollToTop 在反应中不起作用（codesandbox）
【发布时间】：2021-07-16 13:06:50
【问题描述】：

在反应中，我试图让 scrollToTop 工作。

不知何故，它不起作用。

https://codesandbox.io/s/quiet-shape-5iov0?file=/src/App.js 这是密码箱。向下滚动，应该有一个名为click 的按钮向上滚动，但它不起作用。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

如果您只需要滚动顶部，请尝试此操作。

  window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });

功能

const nice = () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });
  };

使用scrollIntoView()

的另一种方式

const nice = () => {
    document.querySelector("body").scrollIntoView({
      behavior: "smooth"
    });
  };

为了更好地理解，请查看window.scrollTo

【讨论】：

【解决方案2】：

scrollTo 是一个窗口函数，所以只需将其附加在此处即可：)

window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });

【讨论】：

【解决方案3】：

您可以像这样使用窗口对象滚动到顶部：

  window.scrollTo(0,0)

【讨论】：

【解决方案4】：

如果你不想使用window对象

    const nice = () => {
    const root = document.querySelector("body");
    console.log(root, " root");
    root.scrollIntoView({
      behavior: "smooth"
    });
  };

【讨论】：