在 React.js 中滚动到页面顶部

在 React 中使用 window.scrollTo() 方法滚动到页面顶部，例如 window.scrollTo(0, 0)。

window 对象上的 scrollTo 方法滚动到文档中的一组特定坐标。

import {useEffect} from 'react';

export default function App() {
  useEffect(() => {
    // 👇️ scroll to top on page load
    window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
  }, []);

  return (
    <div>
      <h2>Top of the page</h2>

      <div style={{height: '155rem'}} />

      {/* 👇️ scroll to top on button click */}
      <button
        onClick={() => {
          window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
        }}
        style={{
          position: 'fixed',
          padding: '1rem 2rem',
          fontSize: '20px',
          bottom: '40px',
          right: '40px',
          backgroundColor: '#0C9',
          color: '#fff',
          textAlign: 'center',
        }}
      >
        Scroll to top
      </button>
    </div>
  );
}

代码示例中的示例展示了如何：

• 渲染组件后滚动到页面顶部。
• 单击按钮滚动到页面顶部。

window.scrollTo 方法滚动到文档中的一组特定坐标。

<button
  onClick={() => {
    window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
  }}
>
  Scroll to top
</button>

它所采用的对象的 top 属性指定沿 Y 轴滚动窗口的像素数。

left 属性指定窗口在 X 轴上滚动的像素数。

behavior 属性指定滚动是否应该平滑地动画化（smooth），或者立即发生（auto）。

behavior 属性的默认值为 auto。

如果我们需要在组件呈现后滚动到页面顶部，则可以使用 useEffect 钩子。

useEffect(() => {
  // 👇️ scroll to top on page load
  window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
}, []);

我们将一个空的 dependencies 数组传递给挂钩，因此它只会在初始渲染时运行。

如果我们需要在单击按钮时滚动到页面顶部，请在元素上设置 onClick 属性，并向其传递一个函数。

该函数应该调用 window.scrollTo() 方法，就像我们在 useEffect 钩子中所做的那样。