Agregar un botón de “volver arriba” en React

Una de las funcionalidades más comunes hoy en día (y más útiles la verdad), es la de agregar un botón para “volver arriba” en nuestras páginas, especialmente cuando nuestro contenido tiende a ser largo.

Y la verdad es que no es algo muy difícil de lograr, con unas pocas líneas de código puedes lograr algo muy vistoso, como lo que tengo en este blog (que me gustó mucho el resultado).

Así que a continuación dejaré los pasos que tomé para añadir un botón de “volver arriba” en React a este blog, que aunque está hecho con Next.js, al final sigue siendo React. Comencemos:

#Tabla de contenido

• Paso 1: Agregar el botón
• Paso 2: Agregar el código para “volver arriba”
• Paso 3: Estilizar el botón
• Paso 4: Mostrar el botón cuando bajamos la página

#Paso 1: Agregar el botón

Para motivos prácticos, en este tutorial yo utilizaré Tailwind CSS (ya que es lo que utilizo en el blog). Pero explicaré el razonamiento en términos de CSS para que sea fácilmente transportable a cualquier otro sistema.

Paso 1.1 Creando el botón

El funcionamiento básico de un botón para volver arriba no es más que un anchor en la página, el cual enlazaremos en nuestro botón para dar un “salto” hasta la parte superior de la página. Por ejemplo:

1<main id=“content”>
2	[…nuestro contenido]
3</main>
4

Y al fondo de nuestro sitio agregamos nuestro botón:

1<a href=“#main”>Volver arriba</a>
2

En teoría eso es todo lo que necesitamos, pero honestamente es algo anticuado, y el salto puede parecer repentino para muchas personas, por lo tanto la mayoría de las veces agregamos un poco de Javascript para hacer el salto más suave.

Comencemos creando el botón en React:

#Paso 2: Agregar el código para “volver arriba”

Para crear un botón en React, lo primero que necesitamos es un componente que nos permita hacer el salto. En este caso, yo lo llamaré BackToTopButton.

1import React from 'react';
2
3export default function BackToTopButton() {
4  return <a href='#main'>Volver arriba</a>;
5}
6

Y luego, en nuestro componente principal, lo importamos y lo agregamos al final

1import BackToTopButton from './BackToTopButton';
2
3export default function Main() {
4  return (
5    <main id='main'>
6      […nuestro contenido]
7      <BackToTopButton />
8    </main>
9  );
10}
11

Eso agregará el botón al final de nuestra página, ahora, para hacer el salto más suave, lo que necesitamos es agregar un poco de Javascript, para ello debemos utilizar la función scrollTo de Javascript. Además, ya que estamos usando Javascript para manejar el salto, lo más óptimo es no utilizar un anchor en el botón, si no que utilizaremos un button en su lugar.

1import React from 'react';
2
3export default function BackToTopButton() {
4  // Función para hacer el salto al dar click.
5  const handleClick = () => {
6    window.scrollTo({
7      top: 0,
8      behavior: 'smooth', // Hace el salto más suave.
9    });
10  };
11
12  return <button onClick={handleClick}>Volver arriba</button>;
13}
14

2.1 ¿Como funciona scrollTo?

La forma en que funciona scrollTo es bastante sencilla, simplemente le pasamos un objeto con las propiedades top y behavior. La propiedad top es la posición (en pixeles) a la que queremos hacer el salto, en este caso 0 para ir al inicio de la página.

La propiedad behavior es la que hace que el salto sea más suave, ya que le estamos diciendo que lo haga de forma smooth. Si no le pasamos esta propiedad, el salto será instantáneo.

También podemos pasar otras propiedades como left para hacer un salto horizontal, pero en este caso no lo necesitamos.

#Paso 3: Estilizar el botón

Ahora que tenemos nuestro botón, necesitamos darle un poco de estilo. En mi caso, utilizaré Tailwind CSS como lo mencioné anteriormente, pero puedes utilizar cualquier sistema de estilos que prefieras.

Básicamente lo que haremos será hacer un botón circular que contenga una flecha apuntando hacia arriba. Para ello, necesitamos agregar un poco de CSS a nuestro componente.

1import React from 'react';
2
3export default function BackToTopButton() {
4  const handleClick = () => {
5    window.scrollTo({
6      top: 0,
7      behavior: 'smooth',
8    });
9  };
10
11  return (
12    <button
13      onClick={() => {
14        window.scrollTo({ top: 0, behavior: 'smooth' });
15      }}
16      className='fixed bottom-0 right-0 z-50 m-4 rounded-full bg-primary p-2 text-white shadow-lg ring-1 ring-secondary'
17    >
18      Volver arriba
19    </button>
20  );
21}
22

3.1 ¿Cómo hacerlo con CSS normal?

Si prefieres utilizar CSS normal, puedes hacerlo de la siguiente manera:

1button {
2  background-color: var(--color--primary); // O nuestro color primario
3  border: 1px solid var(--color--secondary); // O nuestro color secundario.
4  border-radius: 50%;
5  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); // Definida por Tailwind.
6  color: white;
7  inset-block-end: 0;
8  inset-inline-end: 0;
9  margin: 1rem; // 16px o "4" en términos de Tailwind.
10  padding: 0.5rem; // 8px o "2" en términos de Tailwind.
11  position: fixed;
12  z-index: 50;
13}
14

Básicamente, lo que estamos haciendo es crear un botón circular con un color de fondo primario, un borde secundario, una sombra y un color de texto blanco. Además, lo estamos posicionando en la esquina inferior derecha de la página. Y especificamos que siempre se mantenga ahí.

Para nuestro ícono de flecha, podemos utilizar un ícono de Heroicons, que es una librería de íconos de código abierto, creado por el equipo de Tailwind. En este caso, utilizaremos el ícono arrow-up:

1import React from 'react';
2import { ArrowUpIcon } from '@heroicons/react/24/solid';
3
4export default function BackToTopButton() {
5  const handleClick = () => {
6    window.scrollTo({
7      top: 0,
8      behavior: 'smooth',
9    });
10  };
11
12  return (
13    <button
14      onClick={() => {
15        window.scrollTo({ top: 0, behavior: 'smooth' });
16      }}
17      className='fixed bottom-0 right-0 z-50 m-4 rounded-full bg-primary p-2 text-white shadow-lg ring-1 ring-secondary'
18    >
19      <ArrowUpIcon className='h-6 w-6' />
20
21      <span className='sr-only'>Volver arriba</span>
22    </button>
23  );
24}
25

Esto nos dará un resultado similar al siguiente (dale click 😉):

#Paso 4: Mostrar el botón cuando bajamos la página

Ahora tenemos nuestro botón en la página, sin embargo hay varios ajustes que podemos hacer, por ejemplo, no necesitamos agregar un botón de "Volver arriba" si estamos en la parte superior de la página. Por lo tanto sólo deberíamos mostrar el botón cuando el usuario haya bajado un poco, para que tenga sentido.

Como estamos utilizando React, podemos utilizar el hook useState para manejar el estado de nuestro botón. Por ejemplo, podemos crear un estado llamado showButton que sea true cuando el usuario haya bajado más de 100px en la página:

Para saber en que posición de la página se encuentra el usuario, podemos utilizar la propiedad window.scrollY de Javascript, que nos dará la cantidad de pixeles que el usuario ha bajado en la página. Esto justo con el evento scroll, que hará el chequeo cada vez que el usuario haga scroll en la página.

Por último, para hacer el chequeo más eficiente, podemos utilizar el hook useEffect que guarde una referencia al evento scroll y lo quite cuando el componente se desmonte. Siempre hay que pensar en la limpieza de nuestros componentes.

1import React, { useState, useEffect } from 'react';
2import { ArrowUpIcon } from '@heroicons/react/24/solid';
3
4export default function BackToTop() {
5  const [showButton, setShowButton] = useState(false);
6
7  useEffect(() => {
8    // Función para mostrar el botón cuando el usuario haya bajado más de 100px.
9    const toggleVisibility = () => {
10      if (window.scrollY > 100) {
11        setIsVisible(true);
12      } else {
13        setIsVisible(false);
14      }
15    };
16
17    // Agregamos el evento scroll.
18    window.addEventListener('scroll', toggleVisibility);
19
20    // Limpiamos el evento cuando el componente se desmonte.
21    return () => {
22      window.removeEventListener('scroll', toggleVisibility);
23    };
24  }, []);
25
26  const handleClick = () => {
27    window.scrollTo({ top: 0, behavior: 'smooth' });
28  };
29
30  return (
31    showButton && (
32      <button
33        onClick={handleClick}
34        className='fixed bottom-0 right-0 z-50 m-4 rounded-full bg-primary p-2 text-white shadow-lg ring-1 ring-secondary'
35      >
36        <ArrowUpIcon className='h-6 w-6' />
37
38        <span className='sr-only'>Volver arriba</span>
39      </button>
40    )
41  );
42}
43

Con esto, ya tenemos un botón de “volver arriba” que se muestra cuando el usuario ha bajado más de 100px en la página. Y que además hace un salto suave al inicio de la página.

#Mejoras para el futuro

Este es un botón de “volver arriba” bastante básico, pero hay muchas mejoras que podemos hacerle, por ejemplo:

• Animaciones: Podemos agregar animaciones al botón para que aparezca y desaparezca de forma más suave (como en este blog).
• Estilos personalizados: Podemos personalizar el botón con estilos más acordes a nuestro sitio.

¡Y muchas otras mejoras que podemos hacer! Pero por ahora, este botón es un buen comienzo para añadir una funcionalidad muy útil a nuestro sitio.

Espero que este tutorial te haya sido de ayuda, y si tienes alguna duda, no dudes en contactarme en X o enviarme un correo, o el formulario de contacto.