如何在 ReactJS 中创建滚动到底部按钮？

您会看到，有很多聊天应用程序，例如 WhatsApp、Telegram 等，它们正在使用一个有用的功能，例如，如果您在聊天窗口的中间，并且想要转到页面底部，那么您可以使用此按钮自动向下滚动，如跳至内容。以下示例介绍了如何使用useState()钩子在 React JS 中创建滚动到底部按钮。

先决条件：

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

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

npx create-react-app react-scroll-bottom

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

cd react-scroll-bottom

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

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

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

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

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

我们创建一个状态，第一个元素可见作为初始状态，其值为 true，第二个元素作为函数setVisible()用于更新状态。然后创建一个名为toggleVisible的函数，当我们向下滚动页面时，它将状态的值设置为 false。否则，状态值设置为 true。

然后创建一个名为scrollToBottom的函数，我们在其中使用scrollTo 方法将页面滚动到底部。现在我们的状态用于向用户显示/隐藏滚动到底部图标。当用户点击这个图标时，函数scrollToBottom被触发为一个onClick() 事件，它将我们的页面平滑地滚动到底部。您还可以使用'auto'行为代替'smooth' 。向下滚动页面时，toggleVisible函数也会通过window.addEventListener 属性作为事件触发，并将可见状态设置为 false，从而隐藏我们的图标。当我们通过向上滚动返回页面顶部时，状态值更新为 true 并且图标再次开始显示。

ScrollButton.js

import React, {useState} from 'react'; 
import {FaArrowCircleDown} from 'react-icons/fa'; 
import { Button } from './Styles'; 
    
const ScrollButton = () =>{ 
    
  const [visible, setVisible] = useState(true) 
    
  const toggleVisible = () => { 
    const scrolled = document.documentElement.scrollTop; 
    if (scrolled > 0){ 
      setVisible(false) 
    }  
    else if (scrolled <= 0){ 
      setVisible(true) 
    } 
  }; 
    
  const scrollToBottom = () =>{ 
    window.scrollTo({ 
      top: document.documentElement.scrollHeight, 
      behavior: 'auto'
      /* 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 Header = styled.h1` 
   text-align: center; 
   left: 50%;
   color: green; 
`; 
    
export const Content = styled.div` 
   overflowY: scroll; 
   height: 2500px; 
`; 
    
export const Button = styled.div` 
   position: fixed;  
   width: 100%; 
   left: 50%; 
   height: 20px; 
   font-size: 3rem; 
   z-index: 1; 
   cursor: pointer; 
   color: green; 
`

应用程序.js

import { Fragment } from 'react'; 
import ScrollButton from './components/ScrollButton'; 
import { Content, Header } from './components/Styles'; 
    
function App() { 
  return ( 
     
      
GeeksForGeeks Scroll To Bottom
 
       
       
      
Thanks for visiting
 
     
  ); 
} 
    
export default App;

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

npm start

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

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

• 使用平滑的行为：看看它是如何平滑到底部的。