scrollToTop 在反應中不起作用（代碼沙盒）

Question

作為反應，我試圖讓 scrollToTop 工作。

不知何故，它不起作用。

https://codesandbox.io/s/quiet-shape-5iov0?file=/src/App.js這里是codesandbox。 向下滾動，應該有一個按鈕，稱為click向上滾動，但它不起作用。

Answer 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

Answer 2

scrollTo 是一個窗口函數，所以只需將其附加到那里:)

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

Answer 3

您可以像這樣使用 window 對象滾動到頂部：

  window.scrollTo(0,0)

Answer 4

如果你不想使用window對象

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