¿Cómo crear un botón Desplazarse hacia arriba en React JS?

Verá que hay muchos sitios web que utilizan una función útil, como si estuviera desplazándose por la página web, y ahora está en la parte inferior de esa página, entonces puede usar este botón para desplazarse hacia arriba automáticamente como saltar al contenido . El siguiente ejemplo cubre la creación de un botón Desplazarse hacia arriba 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-top

Ahora vaya a su carpeta react-scroll-top escribiendo el comando dado en la terminal.

cd react-scroll-top

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 arriba, 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 falso 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 verdadero cuando nos desplazamos hacia abajo en la página más de 300 px (puede elegir cualquier valor según su elección). De lo contrario, el valor del estado se establece en falso.

Luego se crea una función con el nombre scrollToTop en la que usamos el método scrollTo para desplazar nuestra página hasta la parte superior. Cuando nos desplazamos hacia abajo en la página más de 300 px, la función toggleVisible se activa como un evento a través de la propiedad window.addEventListener y establece el estado visible en verdadero. Ahora nuestro estado se utiliza para mostrar el icono Desplazarse hacia arriba al usuario. Cuando el usuario hace clic en este ícono, la función scrollToTop se activa como un evento onClick() que desplaza nuestra página suavemente hacia la parte superior. También puede usar el comportamiento ‘auto’ en lugar de ‘smooth’ .

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

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

import { Fragment } from 'react';
import ScrollButton from './components/ScrollButton';
import { Content, Heading } from './components/Styles';
  
function App() {
  return (
    <Fragment>
      <Heading>GeeksForGeeks</Heading>
      <Content />
      <ScrollButton />
    </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 a la parte superior.

• Usando un comportamiento suave: vea cómo va sin problemas a la parte superior.