Défilement de la page vers le haut – Comment défiler vers une section particulière avec React

Lorsque vous développez des sites Web et des applications à l’aide de React et de tout autre framework React, vous souhaitez ajouter certaines fonctionnalités pour aider vos utilisateurs à naviguer sur votre site.

Ces fonctionnalités comprennent des boutons de défilement vers le haut et vers le bas, ainsi que la possibilité de défiler n’importe où sur la page. Ces fonctionnalités sont simples à mettre en œuvre, et vous n’avez même pas besoin d’utiliser une bibliothèque externe.

Voici ce que nous allons construire :

Il existe plusieurs bibliothèques et plugins que vous pouvez utiliser pour ajouter simplement la fonctionnalité scroll-to-top dans React. Mais ici, nous allons voir comment mettre en œuvre facilement la fonctionnalité scroll-to-top sans utiliser de bibliothèques.

Commençons..

Comment implémenter la logique

Dans ce tutoriel, nous allons tirer parti des hooks React useState() et useEffect() pour gérer rapidement cette logique.

Je vous recommande de rendre cette fonctionnalité réutilisable en construisant un nouveau composant pour la gérer. Par exemple, je vais créer un composant appelé ScrollToTop.js.

Dans ce composant, nous allons d’abord importer les hooks React useState() et useEffect(), puis nous allons créer un état pour contrôler la visibilité du bouton scroll-to-top. Gardez à l’esprit que cela n’est utile que si vous souhaitez que le bouton s’affiche après que l’utilisateur a fait défiler la page un peu vers le bas, puis disparaisse lorsque l’utilisateur remonte.

La valeur par défaut de cet état est false.

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

L’étape suivante consiste à utiliser le crochet useEffect() pour gérer la logique qui décide quand le bouton doit s’afficher et quand il doit disparaître.

Lorsque l’utilisateur fait défiler la page vers le bas, nous utilisons la fonction addEventListener() pour écouter un événement de défilement. La fonction de rappel affichera le bouton en définissant l’état showTopBtn à true si la position de défilement vertical est supérieure à la valeur que vous spécifiez (dans ce cas, 400) – sinon, elle le définira à false et ne l’affichera pas.

useEffect(() => {
  window.addEventListener('scroll', () => {
    if (window.scrollY > 400) {
      setShowTopBtn(true) ;
    } else {
      setShowTopBtn(false) ;
    }
  }) ;
}, []) ;

Notez que l’exécution se poursuivra pendant que vous vous déplacerez dans le site Web. Par conséquent, le deuxième paramètre du crochet useEffect() est un tableau vide ([]).

Jusqu’à présent, nous avons été en mesure de contrôler l’apparition et l’absence de notre bouton « scroll-to-top ». L’étape suivante consiste à écrire la logique fondamentale qui fait défiler la page vers le haut une fois que le bouton est cliqué.

Pour ce faire, nous allons écrire une fonction qui sera appelée chaque fois que l’utilisateur cliquera sur le bouton « scroll-to-top ». Nous utiliserons la méthode JavaScript window.scrollTo() pour ce faire. Il s’agit d’une technique permettant de faire défiler une page Web jusqu’à un certain ensemble de coordonnées dans le document.

const goToTop = () => {
  window.scrollTo({
    top : 0,
    behavior : 'smooth',
  }) ;
} ;

Remarque : window.scrollTo() prend également en charge une option de comportement, qui précise si le défilement doit se faire en douceur (smoothly) ou se produire instantanément en un seul bond(auto la valeur par défaut).

À ce stade, nous avons réussi à implémenter toute la logique nécessaire pour créer un bouton « scroll-to-top » avec React. Nous allons maintenant ajouter la méthode onclick() au bouton dans notre balisage.

Si vous avez suivi les étapes correctement, votre code final devrait ressembler à quelque chose comme ceci :

import React, { useState, useEffect } de 'react' ;
import { FaAngleUp } de 'react-icons/fa' ;

importez './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',
    }) ;
  } ;

  retourner (

  ) ;
} ;
export default ScrollToTop ;

J’ai inclus la balise, pour que vous puissiez voir où j’ai ajouté la fonction onClick().

L’étape suivante consiste à ajouter ce composant à toute page de votre site Web où vous souhaitez qu’il fonctionne. Si vous voulez qu’il fonctionne sur toutes les pages de votre application React, il suffit de l’ajouter à votre fichier App.js.

Pour ce faire, importez d’abord le composant (ScrollToTop.js), puis ajoutez-le n’importe où dans votre fichier App.js :

import ScrollToTop de './ScrollToTop.js' ;

const App = () => {
    return (

    ) ;
}

export default App ;

Il s’agit de la fonctionnalité la plus simple à ajouter puisque tout ce que vous avez à faire est d’écrire une fonction pour gérer la logique et de l’appeler lorsque le bouton est pressé. Voici à quoi ressemblera la logique :

const scrollToBottom = () => {
  window.scrollTo({
    top : document.documentElement.scrollHeight,
    behavior : 'smooth',
  }) ;
} ;

Simplement, ce que nous faisons, c’est définir l’emplacement scrollTo comme la hauteur de la page entière. L’étape suivante consiste à inclure la méthode onclick() dans le balisage du bouton.

Cette méthode est couramment utilisée dans les barres de navigation des sites Web à page unique lorsque les utilisateurs souhaitent se connecter à partir de la barre de navigation à une certaine section de votre page Web. Cette méthode est assez similaire à celle que nous avons utilisée jusqu’à présent.

Je vais vous expliquer l’idée, puis nous allons écrire une fonction réutilisable pour éliminer les répétitions de code inutiles.

Comment implémenter la logique

Nous allons utiliser useRef() pour cela, qui est un hook React intégré qui accepte un argument ou un paramètre comme valeur initiale et renvoie une référence.

La référence possède une propriété intéressante et utile appelée current. Le hook useRef() est similaire au hook JavaScript getElementById().

La première étape consiste à installer useRef() puis à créer une référence pour accéder à la partie vers laquelle nous voulons défiler. useRef() accepte une valeur nulle.

const aboutSection = useRef(null) ;

L’étape suivante consiste à ajouter la ref que nous avons déclarée à la partie vers laquelle nous souhaitons faire défiler :

Une fois cette étape franchie, nous allons passer à la logique réelle responsable de cette fonctionnalité. Pour ce faire, nous allons écrire une fonction qui sera appelée chaque fois que l’utilisateur appuiera sur le bouton/lien de navigation. La méthode window.scrollTo() fera alors défiler la page jusqu’à l’emplacement spécifié.

Dans cette fonction, nous utiliserons la méthode JavaScript window.scrollTo () qui est utilisée pour faire défiler une page Web jusqu’à un certain nombre de coordonnées dans le document.

const scrollDown = () => {
  window.scrollTo({
    top : aboutSection.current.offsetTop,
    behavior : 'smooth',
  }) ;
} ;

Vous verrez que nous fournissons le haut (où nous voulons aller) comme aboutSection.current.offsetTop. aboutSection est la section que nous venons d’acquérir en utilisant ref, et ref a une propriété appelée current que nous avons utilisée pour obtenir l’élément spécifique. Enfin, nous avons utilisé offsetTop pour obtenir la limite extérieure de l’élément/section particulier auquel nous voulons accéder.

À ce stade, nous avons implémenté avec succès toute la logique nécessaire pour nous aider à faire défiler une région spécifique de notre page d’accueil en utilisant React. Ensuite, nous allons ajouter la méthode onclick() au bouton dans notre markup.

• À propos de nous

Comment rendre notre code réutilisable

Lorsqu’il y a autant de liens de navigation nécessaires pour se rendre dans différentes zones d’une même page Web, il est naturel de vouloir répéter la logique pour gérer chaque section. C’est une mauvaise approche.

Nous pouvons rendre la logique réutilisable de cette façon :

const scrollDown = (ref) => {
  window.scrollTo({
    top : ref.current.offsetTop,
    behavior : 'smooth',
  }) ;
} ;

Dans le code ci-dessus, nous passons la valeur de la référence de la fonction qui est déclenchée dans le bouton de l’individu.

Voici à quoi peut ressembler votre page Web :

Conclusion

Dans cet article, nous avons vu comment implémenter le défilement vers le haut, le bas et un emplacement spécifique avec React. Nous avons utilisé divers hooks React pour nous aider à le faire.

Vous pouvez consulter ce dépôt pour voir le code d’implémentation complet. Voici également un lien en direct.