4 méthodes pour faire défiler jusqu'à l'élément dans jQuery

1. Prérequis pour faire défiler jusqu’à l’élément dans jQuery
2. jQuery Scroll to Element - Défilement dans la fenêtre du document
3. jQuery Animate ScrollTop - Défilement fluide avec la méthode animate
4. jQuery ScrollTop vers le lien interne - défilement fluide jQuery
5. jQuery Faites défiler jusqu’à l’élément à l’intérieur d’un conteneur
6. Conseils à garder à l’esprit
7. Deux raccourcis rapides pour jQuery ScrollTop

Nous montrons des solutions simples pour faire défiler jusqu’à un élément pour différents cas d’utilisation dans jQuery. Nous utilisons les méthodes scrollTop() et offset(), mais nous démontrons également une nouvelle méthode avec position().

Vous verrez comment animer un défilement fluide avec jQuery. Enfin, nous démontrons deux raccourcis courants et quelques conseils pour éviter les erreurs.

Prérequis pour faire défiler jusqu’à l’élément dans jQuery

1. scrollTop()
2. offset()
3. position()

Tout d’abord, regardons les méthodes que nous utiliserons pour faire défiler jusqu’à un élément dans jQuery.

scrollTop()

La méthode jQuery scrollTop() nous permet d’obtenir et de définir la propriété scrollTop de n’importe quel élément. La valeur de la propriété scrollTop est le nombre de pixels que le contenu d’un élément défile actuellement verticalement.

Vous pouvez en savoir plus sur la propriété scrollTop ici.

.scrollTop() - Récupère la valeur actuelle de scrollTop

Nous utilisons scrollTop() sans aucun argument pour renvoyer la valeur de la valeur actuelle de scrollTop() d’un élément.

console.log($('#container').scrollTop());

On voit la valeur de la vue scrollTop de l’élément dans la console. Faisons maintenant défiler l’élément vers une position différente et enregistrons à nouveau la valeur de la propriété scrollTop.

Ici, nous voyons que la console enregistre une valeur différente. La méthode jQuery scrollTop() dans ce formulaire get est essentielle pour obtenir notre effet de défilement.

.scrollTop(val) - Définissez la nouvelle valeur de scrollTop

Nous pouvons passer la valeur que nous voulons faire défiler (verticalement) dans la méthode jQuery scrollTop() dans le formulaire set.

$('document.documentElement').scrollTop(0);

Cela fait défiler le document principal vers le haut car nous passons la valeur 0. Nous le verrons à nouveau comme un raccourci utile.

Nous transmettrons certaines valeurs clés à cette forme set de scrollTop() pour obtenir notre comportement de défilement jQuery vers l’élément.

Vous pouvez connaître en détail la fonction jQuery scrollTop() ici.

offset() - Trouver la position d’un élément pour aider à implémenter le défilement fluide dans jQuery

La méthode jQuery offset() nous permet de déterminer la position actuelle de n’importe quel élément du document. Cette méthode retourne deux propriétés, top et left ; ce sont le nombre de pixels de la bordure du document (c’est-à-dire sans les marges).

console.log(`The position of the element w.r.t document is : ${
    $('#container').offset().top}`);

La méthode offset() affiche la position supérieure de l’élément par rapport au document.

En savoir plus sur la méthode jQuery offset() ici.

position() - Une autre façon d’implémenter le défilement vers l’élément dans jQuery

La méthode position() est similaire à la méthode offset() avec une petite différence : elle renvoie la position de l’élément par rapport à son parent le plus proche. Ainsi, lorsque nous modifions la position relative d’un élément, par exemple pour animer scrolltop dans jQuery, la méthode position() est utile.

Vous pouvez obtenir des détails sur la méthode jQuery position() sur ce lien.

position() renvoie la position de l’élément, y compris ses marges (ici, elle diffère de la méthode offset()).

// displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$('.filler:first').position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$('.filler:first').offset().top}`);

Avec les bases hors de notre chemin, allons faire défiler jusqu’à un élément pour différents cas d’utilisation dans jQuery.

jQuery Scroll to Element - Défilement dans la fenêtre du document

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').offset().top);
});

1. #clickButton est le bouton sur lequel cliquer pour défiler jusqu’à l’élément cible.
2. #scrollToMe est l’élément vers lequel nous voulons défiler.

Décomposons le code :

Nous attachons un gestionnaire d’événements à notre bouton avec la méthode .on. L’événement qui déclenche ce gestionnaire est le premier argument, l’événement click.

Lorsque l’utilisateur clique sur le bouton, le code exécute la fonction de rappel (anonyme) en second argument de la méthode .on.

Nous sélectionnons d’abord le document entier à faire défiler avec l’un des deux arguments de sélection - document.documentElement, qui est l’élément racine, ou dans ce cas, l’élément html et l’élément document.body.

On lance alors la méthode scrollTop() sur cet élément sous sa forme set (voir ci-dessus). Nous voulons scrolltop vers notre élément cible - l’élément image avec l’ID #scrollToMe.

Donc, nous trouvons d’abord le nombre de pixels entre le haut de la page et cet élément d’image cible avec la méthode offset().top - rappelez-vous que cette méthode trouve la position par rapport au document.

Ensuite, nous passons cette valeur à la méthode scrollTop() attachée à l’élément root/body du document. Ainsi, la page Web entière se déplace vers l’élément d’image cible, comme le montre la démonstration vidéo ci-dessus.

Ainsi, cette méthode réalise facilement le défilement jQuery vers le comportement de l’élément.

Mais, honnêtement, ce défilement instantané vers l’élément cible semble ennuyeux. Ajoutons plus de code pour obtenir le bel effet jQuery de défilement fluide.

jQuery Animate ScrollTop - Défilement fluide avec la méthode animate

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).animate({scrollTop: $('#scrollToMe').offset().top}, 500)
});

Le code est similaire à la méthode précédente. Nous n’exécutons que la méthode animate() sur l’élément root/body sélectionné.

Un premier argument est un objet avec les paires CSS propriété : valeur cibles vers lesquelles nous voulons animer.

Ici, nous voulons seulement changer la propriété scrollTop pour atteindre notre élément d’image cible. Ainsi, nous attribuons la valeur du nombre de pixels du haut de la page à l’image.

On le découvre avec la méthode .offset().top sur l’élément image, comme dans la méthode précédente.

jQuery ScrollTop vers le lien interne - défilement fluide jQuery

Nous pouvons également créer un module jQuery scrolltop réutilisable pour tout lien interne avec le code suivant.

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500);
})

Détaillons la logique du code ici. (Veuillez vous référer aux fichiers scrollToInternalLink.html, scrollToInternalLink.js et scrollToInternalLink.css.)

Tout d’abord, nous sélectionnons les balises a avec le sélecteur d’attribut jQuery [href^="#"]. Nous utilisons le signe ^, donc jQuery ne sélectionne que les balises a avec un attribut href qui commence par le signe #.

Nous relions n’importe quel élément en interne à l’aide d’identifiants de fragment. Ce sont des références à des liens internes, et nous les précédons toujours du signe #.

Ainsi, notre sélecteur jQuery ci-dessus sélectionne les liens internes sur la page.

Vous pouvez en savoir plus sur les liens internes en HTML ici.

On appelle alors la méthode e.preventDefault() pour désactiver le comportement par défaut de la balise a qui recharge la page.

Maintenant, nous extrayons le hash de l’élément cible - c’est la référence à l'identifiant de fragment de l’élément cible. La plupart des codes HTML modernes utilisent l’attribut id de notre élément cible.

Nous utilisons ce hash pour sélectionner notre élément cible.

Le reste du code est le même que le code jQuery animate to scroll to ci-dessus. Nous passons la méthode animate() et définissons la propriété scrollTop sur la valeur offset().top de l’élément cible.

jQuery Faites défiler jusqu’à l’élément à l’intérieur d’un conteneur

Parfois, notre élément cible est situé à l’intérieur d’un conteneur déroulant. Nous pouvons utiliser le code suivant pour jQuery sur un élément positionné comme ceci.

let container = $('#container');
let scrollToMe = $('#scrollToMe');

$('button').on('click', function() {
  container.animate(
      {
        scrollTop: scrollToMe.offset().top - container.offset().top +
            container.scrollTop()
      },
      500)
});

Ici, #container est un élément div externe qui agit comme notre conteneur.

#scrollToMe est l’image cible vers laquelle nous voulons faire défiler. Il est imbriqué dans le conteneur div externe.

De plus, le conteneur div externe contient d’autres éléments div et p imbriqués. Ce conteneur div externe est défilable et possède une barre de défilement verticale.

Nous ajoutons le gestionnaire d’événements click au bouton de déclenchement. Le callback exécute la méthode animate sur l’élément conteneur.

Il définit la propriété scrollTop du conteneur sur une nouvelle valeur. Nous calculons cette nouvelle valeur avec la formule suivante.

scrollToMe.offset().top - container.offset().top + container.scrollTop()

1. scrollToMe.offset().top est le nombre de pixels entre le haut du document et l’élément d’image cible.
2. container.offset().top est le nombre de pixels entre le haut de la page et le haut de l’élément div du conteneur.

Mais, il y a un petit hic. L’élément div du conteneur est déroulant ; s’il défile initialement, il s’est déplacé vers le bas de ce nombre de pixels.

Donc, nous devons ajouter ce facteur de container.scrollTop() dans le paramètre que nous passons à la méthode scrollTop.

Conseils à garder à l’esprit

Nous avons deux conseils importants pour faire défiler vers un élément en utilisant les méthodes jQuery ci-dessus.

Conseil de pro 1 :

Les méthodes offset et position renvoient une valeur float, et si vous vous attendez à beaucoup de zooms sur votre page, cela peut entraîner des erreurs. Ainsi, vous pouvez utiliser la fonction parseInt pour convertir d’abord la valeur renvoyée en une valeur int.

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').parseInt(offset().top));
});

Astuce de pro 2 :

L’ animation() prend également une fonction d’accélération comme argument. Cette fonction décide comment l’animation s’exécute.

La valeur par défaut de cette fonction est swing, qui fournit un effet d’animation fluide et uniforme. Nous pouvons donc utiliser cette valeur par défaut pour obtenir le jQuery à défilement fluide lui-même.

Deux raccourcis rapides pour jQuery ScrollTop

Enfin, nous avons deux raccourcis rapides pour deux cas d’utilisation courants du défilement jQuery vers un élément.

jQuery Faire défiler vers le haut du raccourci du document

Si vous avez une longue page Web avec beaucoup de contenu, vous voudrez peut-être fournir un lien "scroll to top" en bas pour faciliter la navigation.

Le code raccourci pour un tel lien d’ancrage est :

// this code scrolls to the top of the document with a click on the anchor
// element

$('#top').on('click', function() {
  $(document.documentElement, document.body).animate({scrollTop: 0}, 500);
});

Nous définissons la valeur cible scrollTop de la fonction animate sur 0 - ce qui nous fait défiler vers le haut de la page.

Ajouter un identifiant de hachage/fragment à l’URL dans jQuery Faire défiler jusqu’à l’élément

Si vous souhaitez ajouter l’identifiant de fragment de votre élément cible à l’URL dans la barre d’adresse, vous devez ajouter une seule ligne à notre défilement vers un code de lien d’ancrage ci-dessus.

// this code adds the fragment identifier/hash of the target
// element to the URL

// this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500, function() {
    window.location.hash = targetHash;
  });
})

La ligne window.location.hash = targetHash est le code qui fournit cette fonctionnalité.

Vous pouvez voir l’identifiant de hachage/fragment d’élément scrollToMe ajouté à la fin de l’URL.

Veillez à inclure cet extrait de code en tant que rappel de la fonction animer pour vous assurer qu’il s’exécute après l’animation - en synchronisation avec les meilleures pratiques JavaScript.