Faites défiler vers le haut en React

Nous allons vous présenter comment créer un bouton avec défilement vers le haut de la fonctionnalité de page dans React.

Utilisez la bibliothèque react-scroll-to-top pour créer un bouton de défilement vers le haut dans React

Lorsque nous avons beaucoup de contenu sur une seule page, il est difficile pour les utilisateurs de faire défiler pour atteindre le haut pour voir la navigation ou naviguer vers une autre page. Mais en tant que développeur, nous trouvons toujours des moyens de faciliter la vie des utilisateurs en faisant défiler vers le haut en un seul clic.

Si nous essayons de créer un bouton de défilement vers le haut doté de toutes les fonctionnalités, nous devrons peut-être écrire un peu de code. Mais lorsque nous travaillons sur une application React, nous pouvons obtenir cette fonctionnalité en installant une bibliothèque conçue pour nous faciliter la vie.

Passons en revue un exemple pour faire défiler vers le haut avec juste un bouton.

Une bibliothèque appelée react-scroll-to-top est utilisée pour obtenir la fonctionnalité de défilement vers le haut. Créons donc une nouvelle application dans React en utilisant la commande suivante.

# react
npx create-react-app my-app

Après avoir créé notre nouvelle application dans React, nous irons dans notre répertoire d’application à l’aide de cette commande.

# react
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# react
npm start

Maintenant, installons la bibliothèque react-scroll-to-top en utilisant npm.

# react
npm i react-scroll-to-top

Une fois la bibliothèque installée, nous pouvons maintenant importer le ScrollToTop dans notre App.js.

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

Maintenant, à l’intérieur de notre fonction par défaut, nous renverrons un modèle qui couvrira environ 200vh de la page pour obtenir un défilement vers le haut. Nous renverrons également le composant ScrollToTop avec certains paramètres tels que smooth pour un défilement fluide et color pour définir la couleur de l’icône.

Donc, notre code dans App.js ressemblera à ci-dessous.

# 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>
  );
}

Voyons maintenant comment fonctionne notre application.

Production :

Comme vous le remarquez dans l’image ci-dessus, nous avons réussi à créer une animation de défilement vers le haut en ajoutant une seule ligne de code dans notre application.

De cette façon, nous pouvons utiliser la fonction de défilement vers le haut sur n’importe laquelle de nos pages sans écrire plus d’une ligne de code.