如何使用 React 创建滚动到顶部按钮

你好，世界！

你好，世界！

这是我的第一篇编码帖子，我对此感到非常兴奋👩‍🎤✨

问题是，我在创建作品集的时候就决定不做粘性菜单，因为……我不太喜欢它。然而，我发现从用户的角度来看，滚动页面到顶部一点也不好用🙅。

与此同时，当我在 WhatsApp 群组中阅读一些旧消息时，我注意到对话Eureka!💡 中出现了“滚动到底部”按钮，所以这是我的假设：如果我尝试创建一个按钮来做同样的事情，但反过来会怎样？

我做了，而且超级喜欢💓。它是我最喜欢的组件之一，现在我在很多项目中都使用它，因为：

• 它使导航变得更加容易🖱️

• 细节决定成败😈，细节可能很小，但它对用户体验有很大帮助

• 做起来真的很简单🤗

这就是我的“如何使用 React 功能组件制作滚动到顶部按钮”

按钮的作用是什么 - 背后的逻辑

用户开始滚动后，按钮将出现在一个角落，允许用户点击它，这样他们就可以一直运行到顶部而无需再滚动。

为此，我们当然需要一个按钮。按钮可以包含文字、表情符号或图标，只要你觉得合适就行。

我们还需要听到滚动位置，以便我们可以隐藏🙈或显示🐵我们的按钮，最后我们需要处理滚动动作本身。

以下是步骤：

1- 创建并设置按钮样式
2- 监听用户位置并处理显示
3- 处理滚动到顶部操作
4- 将道具发送到组件

让我们开始吧！💪

创建按钮🔼

我首先创建了一个名为“GoTop.js”的新组件。我强烈建议你创建一个新的组件，这样以后你就可以根据需要重复使用它了♻️。

这几乎是一个愚蠢的组件，它将呈现按钮本身，并将通过 props 接收隐藏和操作方法🔨。

对于我的按钮，我使用了fontawesome 图标，因为我认为它看起来非常干净和简单。

//goTop.js COMPONENT

const GoTop = (props) => {
  return (
    <>
      <div className={props.showGoTop} onClick={props.scrollUp}>
        <button className="goTop">
          <i className="goTop__text fas fa-chevron-up" />
        </button>
      </div>
    </>
  );
};
export default GoTop;

至于样式💅，我用的是 SASS：我的按钮只有一个display:block;，而 goTop__text 类包含了其他所有东西：位置、颜色、大小、阴影和一点悬停效果。别忘了把它修复一下！

第一步：完成。

✔️ 创建并设置按钮样式

听到用户位置👂并显示按钮

为了渲染按钮，我们需要知道用户的位置。如果没有向上的路径，我们不希望按钮显示出来。

因此，我们将以初始状态 0 开始声明滚动位置
const [scrollPosition, setSrollPosition] = useState(0);

现在，由于我们还需要显示或隐藏按钮，我们将声明另一个状态，这次是“显示”
const [showGoTop, setshowGoTop] = useState("goTopHidden");。

在我看来，我认为管理这种状态的最简单方法是添加一个或另一个类，具有带有display: none;样式的“goTopHidden”类和“goTop”类，正如您之前所见，display: block;它声明使其可见。

这将通过 prop 发送到我的组件，以便包装按钮的 div 接收相应的类。

处理显示👀

此处理程序会将新状态设置为我们刚刚声明的状态。为此，我们将使用window.pageYOffset;此属性“返回文档当前垂直滚动的像素数”，了解更多...

所以首先，我们的处理程序会获取这些信息并将其设置为我们的位置状态。现在我们知道了用户的位置🙋，我们可以告诉处理程序，当用户到达某个位置时必须发生某些事情。根据我们的代码，它将更改隐藏按钮的类。

正如您在下面的代码中看到的，当 scrollPosition 大于 50 (px) 时，它会将元素类更改为“GoTop”，否则，它会设置隐藏按钮的类。

//DISPLAY HANDLER
const handleVisibleButton = () => {
    const position = window.pageYOffset;
    setSrollPosition(position);

    if (scrollPosition > 50) {
      return setshowGoTop("goTop");
    } else if (scrollPosition < 50) {
      return setshowGoTop("goTopHidden");
    }
  };

为了完成这一步，我们将在窗口上添加一个 eventListener 来触发该方法。为此，我们需要使用useEffect Hook 和一个简单的方法window.addEventListener，它会调用我们的 handleVisibleButton 方法。

//SCROLL LISTENER
useEffect(() => {
    window.addEventListener("scroll", handleVisibleButton);
  });

第二步：完成。

✔️ 听取用户位置并处理显示

处理滚动操作🖱️

该处理程序将由用户点击触发，其功能非常简单：向上滚动用户。

为了做到这一点，我们需要使用另一个 Hook：useRef()，我们将在常量中声明它const refScrollUp = useRef();

声明了这个常量后，我们就需要在 JSX 中引用我们想要引用的元素。考虑到我们想要引导用户一直向上跳转，所以我们需要在页面顶部的元素中调用它。

<div>我决定在所有内容上方添加一个标签作为参考。

//REF IN JSX
function App() {
 //code
  return (
    <>
      <div ref={refScrollUp}> </div>
      <Header />
      <AboutUs />
     </>
  );
}

export default App;

现在到了最后一步：我们的处理方法。在我们的方法中，我们必须使用currentHook 的属性。当我们引用 DOM 中的一个元素时，React 会将该元素赋值为“当前”。

我们还需要使用该scrollIntoView()方法。此方法将使调用 scrollIntoView() 的元素对用户可见。

因此我们的处理方法将使用我们创建的引用，并且通过 scrollIntoView，我们将
能够真正将用户一直滚动到顶部。

我们的函数看起来是这样的：

//SCROLL UP HANDLER

const handleScrollUp = () => {
    refScrollUp.current.scrollIntoView({ behavior: "smooth" });
  };

PD：我添加了一个behavior: "smooth"，因为我们希望卷轴看起来柔和。

第三步：完成。

✔️ 处理滚动到顶部的操作

通过 props 发送所有内容✈️

现在所有的东西都在运动中，我们必须通过道具发送两件事：按钮的状态，以便它正确改变，以及我们将在 onClick 时调用的 handleScrollUp 函数。

<GoTop showGoTop={showGoTop} scrollUp={handleScrollUp} />

//PROPS
const GoTop = (props) => {
  return (
    <>
      <div className={props.showGoTop} onClick={props.scrollUp}>
      //BUTTON CODE
    </div>
  );
};
export default GoTop;

第四步：完成。

✔️ 将props发送到组件

完成了🎆🎇

完成这四个步骤后，你应该会有一个完全可用的“转到顶部”按钮💯

这是我在 React 中使用函数式组件实现“返回顶部”按钮的一点心得。真心希望这个方法对你有用，如果你有任何问题，欢迎随时提问。如果我有答案，我会解答；如果没有……我们可以一起 Google 一下 😅