¿Cómo crear un botón de desplazamiento hacia abajo en ReactJS?

Verá, hay muchas aplicaciones de chat como WhatsApp, Telegram, etc., que utilizan una función útil, como si estuviera en medio de una ventana de chat y quisiera ir al final de la página. Puede usar este botón para desplazarse hacia abajo automáticamente como para saltar al contenido . El siguiente ejemplo cubre cómo crear un botón Desplazarse hacia abajo en React JS usando el gancho useState() .

Requisito previo:

• Conocimientos básicos de npm y comando create-react-app.
• Conocimientos básicos de componentes con estilo.
• Conocimiento básico de los ganchos useState() React.

Configuración básica: comenzará un nuevo proyecto usando create-react-app, así que abra su terminal y escriba.

npx create-react-app react-scroll-bottom

Ahora vaya a su carpeta inferior de desplazamiento de reacción escribiendo el comando dado en la terminal.

cd react-scroll-bottom

Módulo requerido: Instale las dependencias requeridas en este proyecto escribiendo el comando dado en la terminal.

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

Ahora cree la carpeta de componentes en src, luego vaya a la carpeta de componentes y cree dos archivos ScrollButton.js y Styles.js .

Estructura del proyecto: La estructura de archivos en el proyecto se verá así.

Ejemplo: en este ejemplo, diseñaremos una página web con el botón Desplazarse hacia abajo, para eso necesitaremos manipular el archivo App.js y otros archivos de componentes creados.

Creamos un estado con el primer elemento visible como un estado inicial que tiene un valor de verdadero y el segundo elemento como función setVisible() para actualizar el estado. Luego se crea una función con el nombre toggleVisible que establece el valor del estado en falso cuando nos desplazamos hacia abajo en la página. De lo contrario, el valor del estado se establece en verdadero.

Luego se crea una función con el nombre scrollToBottom en la que usamos el método scrollTo para desplazar nuestra página hasta el final. Ahora nuestro estado se usa para mostrar/ocultar el ícono Desplazarse hacia abajo para el usuario. Cuando el usuario hace clic en este ícono, la función scrollToBottom se activa como un evento onClick() que desplaza nuestra página suavemente hacia abajo. También puede usar el comportamiento ‘auto’ en lugar de ‘smooth’ . Mientras se desplaza hacia abajo en la página, la función toggleVisible también se activa como un evento a través de la propiedad window.addEventListenery establece el estado visible en falso, lo que a su vez oculta nuestro icono. Cuando regresamos a la parte superior de la página desplazándonos hacia arriba, el valor del estado se actualiza a verdadero y el icono vuelve a aparecer. 

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 ( 
    <Button> 
     <FaArrowCircleDown onClick={scrollToBottom}  
     style={{display: visible ? 'inline' : 'none'}} /> 
    </Button> 
  ); 
} 
    
export default ScrollButton;

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; 
`

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

• Uso del comportamiento predeterminado (automático): vea cómo salta directamente al final.

• Usando un comportamiento suave: vea cómo va suavemente hasta el fondo.