在 React JS 中创建滚动到顶部按钮

在 React JS 中创建一个滚动到顶部按钮可以提供更良好的用户体验，并方便用户在长网页中快速返回页面顶部。本文将介绍如何通过 React 组件来实现滚动到顶部按钮。

步骤

1. 首先，在你的 React 项目中创建一个新的组件，命名为 ScrollToTopButton。

2. 在 ScrollToTopButton 组件中，需要使用状态钩子来追踪按钮是否应该显示，以及用户是否处于页面顶部位置。你可以通过 useState 钩子来实现这一点。

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      setIsVisible(scrollTop > 100);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <button
      className={`scroll-to-top-button ${isVisible ? "show" : ""}`}
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
    >
      Scroll to Top
    </button>
  );
};

export default ScrollToTopButton;

在上述代码中，我们使用 useEffect 钩子添加了一个滚动事件监听器，用于更新按钮的可见性。scroll-to-top-button 类是用于设置按钮的样式，show 类是用于显示按钮。

3. 在你的应用程序的其他地方，你可以将 ScrollToTopButton 组件放置在适当的位置，例如页面底部：

import React from "react";
import ScrollToTopButton from "./ScrollToTopButton";

const App = () => {
  return (
    <div>
      {/* 页面内容 */}
      <ScrollToTopButton />
    </div>
  );
};

export default App;

4. 现在，你已经成功地在 React JS 中创建了一个滚动到顶部按钮。当用户滚动页面超过 100px 时，按钮将显示出来。点击按钮后，页面将平滑滚动回顶部。

结论

通过以上步骤，你可以在 React JS 中创建一个方便的滚动到顶部按钮。通过更新按钮的可见性和滚动事件监听，我们可以根据用户的位置自动显示/隐藏按钮，并使页面滚动回顶部。这将提高用户体验并使用户更方便地导航长网页。