Faites défiler vers le haut d'une page en JavaScript

1. Faites défiler vers le haut d’une page à l’aide de la méthode Vanilla JS window.scrollTo() en JavaScript
2. Défilement vers le haut d’une page à l’aide d’un JS Vanilla animé - Nouvelle forme de la méthode window.scrollTo()
3. Faites défiler vers le haut d’une page à l’aide de la méthode jQuery scrollTop()
4. Faites défiler vers le haut d’une page en animant avec la méthode jQuery animate()

Il est crucial d’avoir un élément d’interface utilisateur pour les longues pages Web afin de permettre aux utilisateurs de faire défiler vers le haut de la page JavaScript. Dans ce tutoriel, vous trouverez plusieurs méthodes JavaScript pour faire défiler vers le haut.

Nous utiliserons la méthode JavaScript scrollTo vanille. Nous montrerons également comment utiliser la méthode jQuery scrollTop() et la propriété scrollTop() pour faire défiler vers le haut (lisez ce qui suit pour découvrir l’avantage d’utiliser jQuery).

Nous donnerons également des astuces bonus : un raccourci intelligent HTML pur d’une ligne et une animation JS vanille personnalisée pour faire défiler vers le haut d’une page.

Faites défiler vers le haut d’une page à l’aide de la méthode Vanilla JS window.scrollTo() en JavaScript

Vous pouvez utiliser la méthode vanilla JS window.scrollTo() pour faire défiler vers le haut de la page en JavaScript. En utilisant la méthode window.scrollTo(), nous pouvons faire défiler jusqu’à n’importe quel ensemble spécifié de coordonnées x et y dans le document.

L’ancienne forme de cette méthode fonctionne comme suit :

window.scrollTo(x - coordinate, y - coordinate);

Nous pouvons l’utiliser pour faire défiler vers le haut d’une page en JavaScript en passant (0,0) comme arguments pour les coordonnées.

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  window.scrollTo(0, 0);
});

(Veuillez consulter les fichiers HTML et CSS joints pour suivre facilement le code.)

Vous pouvez voir la démo de ce code ci-dessous :

Défilement vers le haut d’une page à l’aide d’un JS Vanilla animé - Nouvelle forme de la méthode window.scrollTo()

Les solutions ci-dessus font le travail, mais cela ne fait pas une bonne UX.

La méthode window.scrollTo() a également une nouvelle forme qui nous permet d’animer le mouvement de défilement. Vous pouvez améliorer les mesures UX et d’engagement des utilisateurs avec ce joli petit effet animé.

Le nouveau formulaire fonctionne comme suit :

window.scrollTo(options)

    // options is a JSON objectwith
    // top: the y-coordinate to scroll to
    // left : the x-coordinate to scroll to
    // behavior : an animated effect with vrious string values like 'smooth',
    // 'slow' etc.

Nous pouvons animer le défilement vers le haut de la page avec du JavaScript vanille en utilisant cette forme de cette méthode.

let scrollTopBtn = document.getElementById('top');

scrollTopBtn.addEventListener('click', function() {
  window.scrollTo({top: 0, behavior: 'smooth'});
});

(Veuillez vous référer aux fichiers HTML et CSS joints pour une meilleure compréhension.)

Le code est simple. Nous avons attaché un écouteur d’événement à un bouton pour déclencher la fonction de défilement vers le haut.

Le callback a implémenté la méthode window.scrollTo() dans sa nouvelle forme. Nous avons passé top:0 pour faire défiler vers le haut, et nous avons passé behavior: 'smooth' pour avoir un bel effet d’animation uniforme.

Vous pouvez voir la démo de travail ici:

Lisez en détail la méthode vanilla JS window.scrollTo() ici.

Faites défiler vers le haut d’une page à l’aide de la méthode jQuery scrollTop()

Vous pouvez également faire défiler vers le haut d’une page avec la méthode jQuery scrollTop().

$("#top").on("click",function(){
    $(window).scrollTop(0);
});

La logique est simple. Nous avons attaché un gestionnaire d’événements pour écouter l’événement clic sur notre bouton de défilement vers le haut.

Le callback a exécuté la méthode $(window).scrollTop(0) et a défilé jusqu’en haut de la page car nous avons passé 0 comme argument.

Vous pouvez voir la démo de travail ici:

Faites défiler vers le haut d’une page en animant avec la méthode jQuery animate()

Comme la solution vanilla JS ci-dessus, nous pouvons animer le défilement vers le haut de la page avec jQuery pour améliorer l’UX.

$("#top").on("click",function(){
    $([document.documentElement,document.body]).animate({
        scrollTop:0
    },1000)
});

Plongeons-nous dans la logique ici.

Le rappel de l’écouteur d’événement a d’abord sélectionné le document.documentElement (l’élément racine) ou le document.body. Nous devons choisir les deux pour assurer la compatibilité entre les navigateurs.

(Astuce : c’est l’une des raisons pour lesquelles nous utilisons jQuery. Nous en reparlerons un peu plus tard.)

Nous avons ensuite exécuté la méthode animate() sur notre objet sélectionné et modifié la propriété scrollTop pour atteindre une valeur 0 (le haut de la page.)

Enfin, nous passons la durée de l’animation comme deuxième argument au rappel. Nous avons dépassé 1000 millisecondes ici, mais vous pouvez choisir la durée que vous souhaitez.

Voici la sortie de travail de cette méthode :

Conseil de pro : nous utilisons jQuery pour garantir une meilleure compatibilité entre les navigateurs. Parfois, l’interface utilisateur peut s’afficher bizarrement dans différents navigateurs et il peut être difficile de résoudre les problèmes.

Comme jQuery est une bibliothèque frontale professionnelle, elle a l’avantage de résoudre ces problèmes d’incompatibilité entre navigateurs. Ainsi, si vos solutions JS vanille se cassent dans certains navigateurs, vous pouvez utiliser à la place la version jQuery de la méthode.

One-Line Clever Pure HTML Faites défiler vers le haut de la page Hack

Vous pouvez également faire défiler vers le haut de la page (sans animation) avec un hack HTML sur une seule ligne.

<div>
    <a href="#">To Top</a>
</div>

Voici la démo de la sortie.

Utilisez l’ancienne propriété scrollTop pour faire défiler vers le haut de la page

Certains navigateurs ont des problèmes avec la méthode vanilla JS scrollTo() que nous avons utilisée ci-dessus. Par exemple, de nombreux utilisateurs signalent que MS Edge ne fonctionne pas toujours bien avec cette méthode,

Ainsi, vous pouvez à la place utiliser l’ancienne méthode avec la propriété scrollTop. La propriété scrollTop définit les pixels avec lesquels vous souhaitez faire défiler un élément verticalement.

Mais, un cas particulier de cette propriété est que lorsque vous l’appliquez à la racine ou à l’élément html, elle déplace le document entier.

Découvrez la propriété scrollTop en détail ici.

Nous pouvons faire défiler vers le haut d’une page avec cette propriété.

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  document.getElementsByTagName('html')[0].scrollTop = 0;
});

Le code est simple. Le rappel a sélectionné l’élément html et défini sa propriété scrollTop sur 0.

Vous pouvez voir la démonstration de travail ci-dessous :

Défilement personnalisé vers le haut de la page à l’aide d’un script d’animation JavaScript

Enfin, nous avons un joli petit script pour concevoir votre animation JavaScript personnalisée de défilement vers le haut. Nous utilisons les fonctions setInteval() et clearInterval() pour exécuter l’effet d’animation.

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  let customAnimScroll = window.setInterval(function() {
    let topOffset = window.pageYOffset;
    if (topOffset > 0) {
      window.scrollTo({top: topOffset - 20});
    } else {
      clearInterval(customAnimScroll);
    }
  }, 20);
});

Décomposons ici la logique.

Nous avons exécuté une fonction setInterval() sur l’objet window à l’intérieur du rappel du gestionnaire d’événements sur le bouton de défilement vers le haut. La fonction setInterval() a exécuté le rappel que nous lui avons transmis à plusieurs reprises après une durée spécifique.

Il a également renvoyé un ID que nous avons stocké pour démarrer/arrêter/modifier cette instance particulière de la méthode setInterval(). Nous avons donc exécuté la méthode setInterval() et stocké son ID dans la variable customAnimScroll.

Le callback de la fonction setInterval() a stocké la valeur pageYOffset de l’objet window dans la variable topOffset. Cette valeur est le nombre de pixels que l’objet window défile vers le bas.

Enfin, nous avons vérifié si la valeur de topOffset est supérieure à 0 (ce qui signifie que la window est descendue de quelques pixels). Si oui, on remonte la window de 20 pixels avec la méthode scrollTo vue plus haut dans sa nouvelle forme.

Ici, nous avons choisi de déplacer 20 pixels vers le haut pour chaque cycle, mais vous pouvez choisir n’importe quel autre nombre.

Si la valeur de topOffset n’est pas supérieure à 0, nous avons défilé jusqu’en haut de la window. Dans ce cas, nous avons terminé la fonction setInterval() en passant son ID que nous avons stocké précédemment dans la variable customAnimScroll à la méthode clearInterval().

Vous pouvez voir la démo de travail ici: