当前位置：首页 > React

react如何回到顶部

2026-01-24 20:37:00React

使用 window.scrollTo 方法

通过调用 window.scrollTo(0, 0) 可以直接滚动到页面顶部。可以在按钮的点击事件中触发该方法：

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth" // 可选平滑滚动效果
  });
};

// 在组件中使用
<button onClick={scrollToTop}>回到顶部</button>

使用 useRef 和 scrollIntoView

创建一个位于顶部的元素（如空的 div），通过 useRef 获取其引用，并调用 scrollIntoView 方法：

import { useRef } from 'react';

function App() {
  const topRef = useRef(null);

  const scrollToTop = () => {
    topRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <div ref={topRef} /> {/* 顶部锚点 */}
      <button onClick={scrollToTop}>回到顶部</button>
    </div>
  );
}

使用第三方库 react-scroll

安装 react-scroll 库，通过其提供的 Link 组件或 animateScroll 方法实现：

npm install react-scroll

import { Link } from 'react-scroll';

// 方法1：使用 Link 组件
<Link to="top" smooth={true} duration={500}>
  回到顶部
</Link>

// 方法2：使用 animateScroll
import { animateScroll } from 'react-scroll';
animateScroll.scrollToTop({ duration: 500 });

自定义滚动钩子

封装一个自定义 Hook，监听滚动位置并显示/隐藏返回顶部按钮：

react如何回到顶部

import { useState, useEffect } from 'react';

const useScrollToTop = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };
    window.addEventListener('scroll', toggleVisibility);
    return () => window.removeEventListener('scroll', toggleVisibility);
  }, []);

  return { isVisible };
};

// 使用示例
function App() {
  const { isVisible } = useScrollToTop();

  return (
    <div>
      {isVisible && (
        <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          回到顶部
        </button>
      )}
    </div>
  );
}