Cómo desplazarse hacia la parte superior, inferior o cualquier sección en React con un componente de botón

En esta guía práctica, aprenda cómo crear un componente de botón React reutilizable, para desplazarse hacia arriba, hacia abajo o cualquier sección en particular en una página con JavaScript.

Introducción

La función "scroll-to-top" es una excelente adición a cualquier sitio web que obligue a los visitantes a desplazarse una gran distancia antes de llegar al final de la página, ya que se vuelve bastante molesto volver a la parte superior.

Por extensión, desplazarse hasta la parte inferior o cualquier punto o sección en particular le permite navegar por un usuario en una experiencia perfecta para Aplicaciones de una sola página (SPA).

En esta guía práctica, aprenderemos a crear un botón React que permita a los usuarios desplazarse hacia arriba, hacia abajo o cualquier sección con React. Usaremos Ganchos de reacción y haremos de este un componente reutilizable. Al final de este artículo, veremos cómo hacerlo con la biblioteca react-scroll-to-top.

{.icon aria-hidden=“true”}

Nota: El código fuente está disponible en nuestro repositorio GitHub, y para ver una demostración en vivo de la aplicación, visite esta aplicación Vercel.

Usar React y React Hooks

Para una funcionalidad simple como esta, puede codificar fácilmente una solución desde cero, en lugar de instalar una biblioteca. ¡Crear una funcionalidad como esta desde cero permite una mayor personalización y una apreciación de lo que las bibliotecas abstraen!

Comenzando

Haremos un componente separado, produciendo una pieza de código reutilizable que se puede distribuir entre sus proyectos. Además, usaremos un ícono de flecha de react-icons para esta guía, sin embargo, cualquier ícono que funcione para usted funcionará igual de bien.

Instalación de react-icons

Para usar react-icons, debe instalar el módulo. Puedes instalar react-icons con:

1
$ npm i react-icons

Desplazarse hacia arriba en React

Importemos la biblioteca y el icono en sí, y configurémoslos como un componente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React from 'react';
import { FaAngleUp } from 'react-icons/fa';

import './index.css';

const ScrollToTop = () => {
    return (
        <div className="top-to-btm">
            <FaAngleUp className="icon-position icon-style" />
        </div>
    );
};
export default ScrollToTop;

Apliquemos también algo de estilo al ícono y agreguemos una animación de movimiento en index.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.top-to-btm{
  position: relative;
}
.icon-position{
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 20;
}
.icon-style{
  background-color: #551B54;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  color: #fff;
  cursor: pointer;
  animation: movebtn 3s ease-in-out infinite;
  transition: all .5s ease-in-out;
}
.icon-style:hover{
  animation: none;
  background: #fff;
  color: #551B54;
  border: 2px solid #551B54;
}
@keyframes movebtn {
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(20px);
  }
  50%{
    transform: translateY(0px);
  }
  75%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}

¡Excelente! Ahora podemos implementar la lógica que lleva al usuario a la parte superior de la página.

Implementando la lógica {#implementando la lógica}

Usaremos los ganchos useState() y useEffect() para permitirnos desarrollar la funcionalidad fácil y rápidamente.

1
import React, { useState, useEffect } from 'react';

El siguiente paso es crear un estado y configurarlo como falso por defecto; este estado controlará la visibilidad del botón "desplazarse hacia arriba", ya que solo queremos que el botón aparezca después de que el usuario se haya desplazado un poco hacia abajo y desaparezca después de que el usuario se haya desplazado hasta el final. parte superior:

1
const [showTopBtn, setShowTopBtn] = useState(false);

En este punto, utilizaremos el gancho useEffect() para construir la lógica que determina cuándo queremos que aparezca el botón y cuándo queremos que desaparezca.

{.icon aria-hidden=“true”}

Nota: El Gancho de efecto está activo de forma predeterminada después del renderizado inicial y cada vez que se actualiza el estado. Se utiliza para realizar un efecto cada vez que cambia el estado, como su nombre lo indica.

Establezcamos el estado en verdadero después de que el usuario se haya desplazado 400 píxeles hacia abajo:

1
2
3
4
5
6
7
8
9
useEffect(() => {
    window.addEventListener('scroll', () => {
        if (window.scrollY > 400) {
            setShowTopBtn(true);
        } else {
            setShowTopBtn(false);
        }
    });
}, []);

Agregamos un ‘EventListener’ a la ‘ventana’ para escuchar un desplazamiento y luego ejecutar una función cuando el condicional dentro del oyente devuelve ‘verdadero’. Si la posición de desplazamiento vertical es superior a 400 (según lo determine usted), la función establece el estado showTopBtn en true; de lo contrario, lo establece en falso. Recuerde que esto se ejecutará constantemente cuando se desplace por la página web y, por lo tanto, actualizará el botón para que deje de mostrarse cuando alguien se desplace hacia atrás hasta la parte superior de la página.

¡La funcionalidad final que queremos implementar es manejar el evento clic! Una vez que el usuario haga clic en el botón, desearemos desplazarlo de nuevo a la parte superior. Afortunadamente, el objeto window tiene un método dedicado scrollTo() ¡exactamente para esto! Vamos a envolverlo con una función que llamaremos cuando un usuario haga clic en el botón:

1
2
3
4
5
6
const goToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth',
    });
};

{.icon aria-hidden=“true”}

Nota: window.scrollTo() también acepta un parámetro behavior que se usa para especificar si el desplazamiento debe ser animado sin problemas (smooth), o debe ocurrir instantáneamente en un solo salto (auto, el valor por defecto).

Finalmente, agreguemos un oyente onclick() al botón en nuestro marcado, conectándolo al método goToTop():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, { useState, useEffect } from "react";
import { FaAngleUp } from "react-icons/fa";

import "./index.css";

const ScrollToTop = () => {
    const [showTopBtn, setShowTopBtn] = useState(false);
    useEffect(() => {
        window.addEventListener("scroll", () => {
            if (window.scrollY > 400) {
                setShowTopBtn(true);
            } else {
                setShowTopBtn(false);
            }
        });
    }, []);
    const goToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };
    return (
        <div className="top-to-btm">
            {" "}
            {showTopBtn && (
                <FaAngleUp
                    className="icon-position icon-style"
                    onClick={goToTop}
                />
            )}{" "}
        </div>
    );
};
export default ScrollToTop;

¡Eso es todo! El componente ahora puede importarse a una nueva página y usarse. En el archivo App.js, vamos a importarlo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import ScrollToTop from './ScrollToTop';

function App() {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

{.icon aria-hidden=“true”}

Nota: Para diseñar esta página, consulte nuestro repositorio GitHub.

Usando la biblioteca react-scroll-to-top

La biblioteca react-scroll-to-top es un componente de botón ligero y personalizable que se desplaza a la parte superior de la página cuando se hace clic. Este componente es análogo al nuestro, pero no es necesario que lo codifique usted mismo.

Naturalmente, solo aparece una vez que se ha desplazado hacia abajo lo suficiente como para que tenga sentido que aparezca.

Instalando react-scroll-to-top

Ejecute este comando en su terminal:

1
$ npm i react-scroll-to-top

Desplazarse hacia arriba con react-scroll-to-top

Para usar el componente, importamos react-scroll-to-top y lo usamos como hemos usado el nuestro:

Importe y luego incluya <ScrollToTop /> en cualquier lugar de su función de renderizado/retorno:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import ScrollToTop from "react-scroll-to-top";

function App() {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

¡La biblioteca también es personalizable! Hay una buena cantidad de accesorios que puedes modificar para obtener diferentes efectos.

Esto tiene tantos accesorios, y todos se enumeran a continuación con su descripción y el tipo de datos que reciben:


Tipo de propiedad Descripción Predeterminado booleano suave Si se debe usar el desplazamiento suave* falso número superior Altura después de que la página se desplace para ser visible 20 cadena de color El icono SVG color de relleno "negro" svgPath cadena El icono SVG ruta d atributo Una ruta de flecha cadena de ancho El ancho del icono SVG "28" cadena de altura El icono SVG altura "28" cadena viewBox El icono SVG atributo viewBox "0 0 256 256" componente cualquier Componente para anular el icono SVG. Ver ejemplos objeto de estilo Objeto para agregar/anular el estilo className cadena Classname para anular completamente el estilo


Desplazarse hacia abajo

La función desplazarse hacia abajo en React funciona de manera similar a desplazarse hacia arriba: definimos una función que, al presionar un botón, desplaza al usuario a un punto establecido. Esta vez, el punto no será la parte superior, será la parte inferior:

1
2
3
4
5
6
const scrollToBottom = () => {
  window.scrollTo({
    top: document.documentElement.scrollHeight,
    behavior: 'smooth',
  });
};

Establecemos la propiedad top a la altura de toda la página, tal como se obtiene del document. Esto asegurará que nos desplacemos hacia abajo hasta la altura del píxel debajo de toda la página, o más bien, hasta la parte inferior de la página.

El siguiente paso sería incluir el método onclick() en nuestro marcado para el botón:

1
2
3
<div className="link btn" onClick={scrollToBottom}>
  Scroll to bottom <MdArrowDropDownCircle />
</div>

Desplazarse a una sección particular con React

Desplazarse a una determinada sección es muy popular entre los sitios web de una sola página, porque en lugar de enrutar a un usuario a una página diferente para las páginas comunes como "Acerca de nosotros" y "Contacto", puede simplemente desplazarse hacia abajo hasta la sección correspondiente de esa página. Este es un enfoque popular cuando se cuentan historias con páginas, donde se espera que un usuario se desplace hacia abajo de todos modos, pero también puede saltar a una sección determinada.

Nuevamente, esto es esencialmente lo que hemos estado haciendo. Esta vez, sin embargo, nos desplazaremos a un elemento determinado.

Implementando la lógica {#implementando la lógica}

Usaremos el gancho useRef() - es un React hook incorporado que acepta un argumento como su valor inicial y devuelve una referencia. La referencia tiene una propiedad interesante y útil llamada actual. El gancho useRef() es similar al getElementById() de Vanilla JavaScript.

El primer paso es importar useRef() y luego crear una ref (referencia) a la parte a la que queremos desplazarnos:

1
2
3
import { useRef } from react;

const aboutSection = useRef(null);

El siguiente paso sería agregar la ref que declaramos a la sección a la que deseamos desplazarnos:

1
2
3
<div className="section section2" ref={aboutSection}>
    <h2>About Us</h2>
</div>

Ahora, nos desplazamos a la referencia actual y la desplazamos hacia la parte superior, para colocar la parte superior del elemento en la parte superior de la pantalla en lugar de en la parte inferior:

1
2
3
4
5
6
const scrollDown = () => {
  window.scrollTo({
    top: aboutSection.current.offsetTop,
    behavior: 'smooth',
  });
};

En este punto, hemos implementado con éxito toda la lógica necesaria para ayudarnos a desplazarnos a una región específica de nuestra página de inicio usando reaccionar. A continuación, agregaremos el método onclick() al botón en nuestro marcado:

1
2
3
<li className="link" onClick={scrollDown}>
  About Us
</li>

Hacer que nuestro código sea reutilizable

Las barras de navegación suelen tener varios enlaces que conducen a varias secciones. ¡Las acciones repetidas exigen la generalización entre instancias! Podemos hacer que la lógica sea reutilizable de esta manera:

1
2
3
4
5
6
const scrollDown = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

En el código anterior, estamos pasando el valor ref\ de la función que se activa en el botón del individuo.

La barra de navegación en su página podría verse algo así como:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div className="section section1">
    <div className="link btn">
        Scroll to bottom <MdArrowDropDownCircle />
    </div>
    <ul className="nav-links">
        <li className="link" onClick={() => scrollDown(aboutSection)}>
        About Us
        </li>
    <li className="link" onClick={() => scrollDown(servcesSection)}>
        Services
    </li>
    <li className="link" onClick={() => scrollDown(contactSection)}>
        Contact
      </li>
    </ul>
</div>

<div className="section section2" ref={aboutSection}>
    <h2>About Us</h2>
</div>
<div className="section section3" ref={servcesSection}>
    <h2>Services</h2>
</div>
<div className="section section4" ref={contactSection}>
    <h2>Contact</h2>
</div>

Conclusión

En esta guía, hemos aprendido cómo crear un componente reutilizable, desde cero, para realizar la operación de desplazamiento hacia arriba fácilmente. ¡Este componente es fácilmente transferible entre proyectos! Simplemente transfiera los archivos asociados e impórtelos a una nueva página. Finalmente, hemos echado un vistazo a una biblioteca popular que se encarga de esto por nosotros, así como los accesorios asociados con la personalización.

La demostración en vivo de la aplicación se puede encontrar aquí. app/).