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

您会看到很多网站都在使用有用的功能，例如滚动网页，现在您位于该页面的底部，然后您可以使用此按钮自动向上滚动，例如跳到内容。以下示例介绍了使用useState()钩子在 React JS 中创建一个滚动到顶部按钮。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useState() React hooks 的基础知识。

基本设置：您将使用create-react-app启动一个新项目，因此打开您的终端并输入。

npx create-react-app react-scroll-top

现在通过在终端中键入给定的命令转到您的react-scroll-top文件夹。

cd react-scroll-top

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

npm install --save styled-components
npm install --save react-icons

现在在 src 中创建components文件夹，然后转到 components 文件夹并创建两个文件ScrollButton.js和Styles.js 。

项目结构：项目中的文件结构将如下所示。

示例：在此示例中，我们将设计一个带有 Scroll To Top 按钮的网页，为此我们需要操作 App.js 文件和其他创建的组件文件。

我们创建一个状态，第一个元素可见作为初始状态，其值为 false，第二个元素作为函数setVisible()用于更新状态。然后创建一个名为toggleVisible的函数，当我们向下滚动页面超过 300 像素时，它将状态的值设置为 true（您可以根据自己的选择选择任何值）。否则，状态值设置为 false。

然后创建一个名为scrollToTop的函数，我们在其中使用scrollTo 方法将页面滚动到顶部。当我们向下滚动页面超过 300 像素时，toggleVisible函数会通过window.addEventListener 属性作为事件触发，并将 state visible 设置为 true。现在我们的状态用于向用户显示滚动到顶部图标。当用户点击这个图标时，函数scrollToTop 被触发为一个onClick() 事件，它将我们的页面平滑地滚动到顶部。您还可以使用'auto'行为代替'smooth' 。

ScrollButton.js

import React, {useState} from 'react';
import {FaArrowCircleUp} from 'react-icons/fa';
import { Button } from './Styles';
  
const ScrollButton = () =>{
  
  const [visible, setVisible] = useState(false)
  
  const toggleVisible = () => {
    const scrolled = document.documentElement.scrollTop;
    if (scrolled > 300){
      setVisible(true)
    } 
    else if (scrolled <= 300){
      setVisible(false)
    }
  };
  
  const scrollToTop = () =>{
    window.scrollTo({
      top: 0, 
      behavior: 'smooth'
      /* you can also use 'auto' behaviour
         in place of 'smooth' */
    });
  };
  
  window.addEventListener('scroll', toggleVisible);
  
  return (
    
     
    
  );
}
  
export default ScrollButton;

样式.js

import styled from 'styled-components';
  
export const Heading = styled.h1`
   text-align: center;
   color: green;
`;
  
export const Content = styled.div`
   overflowY: scroll;
   height: 2500px;
`;
  
export const Button = styled.div`
   position: fixed; 
   width: 100%;
   left: 50%;
   bottom: 40px;
   height: 20px;
   font-size: 3rem;
   z-index: 1;
   cursor: pointer;
   color: green;
`

应用程序.js

import { Fragment } from 'react';
import ScrollButton from './components/ScrollButton';
import { Content, Heading } from './components/Styles';
  
function App() {
  return (
    
      GeeksForGeeks
      
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

• 使用默认行为（自动）：看看它是如何直接跳到顶部的。

• 使用平滑的行为：看看它是如何顺利到达顶部的。