Desplazamiento hacia arriba en React

Presentaremos cómo crear un botón con la función de desplazamiento a la parte superior de la página en React.

Use la biblioteca react-scroll-to-top para crear el botón Desplazarse hacia arriba en React

Cuando tenemos mucho contenido en una sola página, es difícil que los usuarios se desplacen para llegar a la parte superior para ver la navegación o navegar a otra página. Pero como desarrollador, siempre encontramos formas de hacer que la vida de los usuarios sea más fácil para desplazarse hasta la parte superior con solo hacer clic en un botón.

Si intentamos crear un botón de desplazamiento hacia arriba con todas las funciones, es posible que tengamos que escribir un poco de código. Pero cuando estamos trabajando en una aplicación React, podemos lograr esta funcionalidad instalando una biblioteca que se hizo para hacernos la vida más fácil.

Veamos un ejemplo para desplazarse hasta la parte superior con solo un botón.

Se utiliza una biblioteca llamada react-scroll-to-top para obtener la funcionalidad de desplazamiento hacia arriba. Entonces, creemos una nueva aplicación en React usando el siguiente comando.

# react
npx create-react-app my-app

Después de crear nuestra nueva aplicación en React, iremos a nuestro directorio de aplicaciones usando este comando.

# react
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# react
npm start

Ahora, instalemos la biblioteca react-scroll-to-top usando npm.

# react
npm i react-scroll-to-top

Una vez que la biblioteca está instalada, ahora podemos importar el ScrollToTop en nuestro App.js.

# react
import ScrollToTop from "react-scroll-to-top";

Ahora, dentro de nuestra función predeterminada, devolveremos una plantilla que cubrirá alrededor de 200vh de la página para lograr un desplazamiento hacia la parte superior. También devolveremos el componente ScrollToTop con algunas configuraciones como suave para un desplazamiento suave y color para establecer el color del icono.

Así que nuestro código en App.js se verá como a continuación.

# react
import React from "react";
import "./styles.css";
import ScrollToTop from "react-scroll-to-top";

export default function App() {
  return (
    <div className="App">
      <ScrollToTop smooth color="#000" />
      <h1>Scroll To See Magic</h1>
      <p style={{ marginTop: "200vh" }}>You Have Reached Bottom</p>
    </div>
  );
}

Ahora, veamos cómo funciona nuestra aplicación.

Producción:

Como observa en la imagen de arriba, hemos creado con éxito una animación de desplazamiento hacia arriba al agregar una sola línea de código en nuestra aplicación.

De esta forma, podemos usar la función de desplazamiento hacia arriba en cualquiera de nuestras páginas sin escribir más de una línea de código.