当前位置：首页 > React

react如何回到顶部

2026-03-11 05:24:35React

使用 `window.scrollTo` 方法

通过调用 window.scrollTo(0, 0) 可以直接将页面滚动到顶部。这种方式简单直接，适用于大多数场景。

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

使用 `scrollIntoView` 方法

在页面顶部添加一个元素（如 div），并通过 scrollIntoView 方法滚动到该元素。

react如何回到顶部

const topElement = document.getElementById('top');
topElement.scrollIntoView({ behavior: 'smooth' });

使用 React Refs 和 `useRef`

结合 React 的 useRef 钩子，可以获取顶部元素的引用并滚动到该元素。

import { useRef } from 'react';

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

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

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

使用第三方库

如果需要更复杂的滚动控制，可以使用第三方库如 react-scroll 或 react-router 的滚动恢复功能。

react如何回到顶部

import { animateScroll } from 'react-scroll';

const scrollToTop = () => {
  animateScroll.scrollToTop();
};

监听滚动事件显示按钮

通常回到顶部按钮会在滚动一定距离后显示。可以通过监听滚动事件实现。

import { useState, useEffect } from 'react';

function ScrollToTopButton() {
  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 && (
      <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
        回到顶部
      </button>
    )
  );
}

自定义 Hook 封装

将回到顶部的逻辑封装成自定义 Hook，方便复用。

import { useState, useEffect } from 'react';

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

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener('scroll', toggleVisibility);
    return () => window.removeEventListener('scroll', toggleVisibility);
  }, []);

  return { isVisible, scrollToTop };
}

// 使用示例
function MyComponent() {
  const { isVisible, scrollToTop } = useScrollToTop();

  return (
    isVisible && (
      <button onClick={scrollToTop}>回到顶部</button>
    )
  );
}

标签: react