jQuery / Créer un lien de retour en haut fluide

Créez un vrai lien href="#top", puis ajoutez jQuery .animate({ scrollTop: 0 }) sur l’élément qui fait défiler le document. Empêchez le saut immédiat, mais conservez l’ancre sans JavaScript. Respectez le mouvement réduit et placez le focus sur le titre supérieur après la fin.

Choisir le défilement et le lien de base

L’exemple déplace toute la page. document.scrollingElement renvoie son élément défilant réel, la racine en mode standard. Gardez <!doctype html>. Une seule cible évite deux effets et rappels séparés sur html et body.

Donnez id="top" au titre et faites pointer le lien dessus. tabindex="-1" permet un focus programmé sans ajouter de passage dans la navigation Tab habituelle. Le seul défilement peut laisser le focus en bas : gérez-le séparément.

Exemple complet dans un fichier

Enregistrez tout en UTF-8 dans back-top-demo.html et ouvrez-le dans le navigateur. Internet charge le fichier jQuery officiel complet 4.0.0. L’animation temporisée nécessite effects, donc pas slim. Aucun serveur ou installation n’est nécessaire.

Go to 900px crée la position de comparaison ; le lien inférieur droit reste utilisable. La page est assez haute pour défiler. La barre fixe sert à l’exercice ; évitez les chevauchements avec en-têtes et publicités sur un site réel.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Smooth back-to-top link</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    html { scroll-behavior: auto; }
    body { font: 16px/1.6 sans-serif; margin: 0; padding: 100px 20px; min-height: 2400px; box-sizing: border-box; }
    #top { max-width: 760px; margin: 0; }
    #top:focus { outline: 3px solid teal; }
    #toolbar { position: fixed; top: 0; left: 0; right: 0; background: #fff; padding: 12px; z-index: 2; }
    button, a { font: inherit; }
    button { margin: 4px; }
    #back { position: fixed; right: 16px; bottom: 16px; padding: 10px 14px; background: #075d55; color: #fff; border-radius: 6px; z-index: 2; }
    #status { position: fixed; left: 12px; bottom: 70px; max-width: calc(100% - 48px); padding: 8px; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
    .spacer { margin-top: 700px; }
  </style>
</head>
<body>
  <div id="toolbar"><button type="button" id="down">Go to 900px</button><button type="button" id="stop">Stop movement</button></div>
  <h1 id="top" tabindex="-1">Top of the example page</h1>
  <p>Use the fixed link after scrolling down.</p>
  <p class="spacer">Middle of the page</p>
  <p class="spacer">Lower content</p>
  <a id="back" href="#top">Back to top</a>
  <pre id="status" aria-live="polite"></pre>
  <script>
    $(function () {
      const root = document.scrollingElement;
      if (!root) return;
      const $root = $(root);
      let completed = 0, state = "ready";
      function report() { $("#status").text(`scrollY=${Math.round(window.scrollY)}\ncompleted=${completed}\nstate=${state}`); }
      function interrupt() {
        if (state !== "moving") return;
        $root.stop(true, false); state = "interrupted"; report();
      }
      $("#back").on("click.backTopLesson", function (event) {
        event.preventDefault();
        $root.stop(true, false);
        state = "moving"; report();
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        $root.animate({ scrollTop: 0 }, { duration: reduce ? 0 : 600, complete: function () {
          completed++; state = "done";
          document.getElementById("top").focus({ preventScroll: true });
          report();
        } });
      });
      $("#down").on("click", function () { $root.stop(true, false).scrollTop(900); completed = 0; state = "ready"; report(); });
      $("#stop").on("click", interrupt);
      $(window).on("scroll.backTopLesson", report);
      $(window).on("wheel.backTopLesson touchstart.backTopLesson", interrupt);
      $(document).on("keydown.backTopLesson", function (event) {
        if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) interrupt();
      });
      report();
    });
  </script>
</body>
</html>

Sortie initiale en haut. L’arrondi facilite seulement la lecture, sans limiter le calcul de l’animation aux entiers.

scrollY=0
completed=0
state=ready

1. Appuyez sur Go to 900px. Si la zone visible est trop haute pour atteindre 900, réduisez-la.
2. Back to top revient normalement en 600ms. scrollY diminue jusqu’à zéro, puis completed=1 et state=done.
3. Le contour de focus du titre apparaît. Vérifiez aussi le lien avec le clavier et Entrée.
4. Depuis 900, plusieurs clics n’empilent pas les trajets : l’ancien effet s’arrête et repart de la position actuelle.
5. Stop movement interrompt à une position intermédiaire avec state=interrupted. Réactivez le lien ou restaurez 900 pour comparer.

Ces actions, clavier, répétitions, arrêt et mouvement réduit ont été exécutés avec 3.7.1 et 4.0.0 dans Edge sous Windows. Sans JavaScript, une vérification distincte a suivi l’ancre #top.

Clics, interruption et mouvement réduit

La cible .animate() est scrollTop numérique zéro. Sans event.preventDefault(), le saut natif peut concurrencer l’animation. .stop(true, false) vide la file et arrête sans terminer à destination. Les nouveaux clics repartent de la position actuelle sans exécuter les anciens rappels de fin.

Molette, début tactile et touches de défilement appellent interrupt() pour rendre la main. Aucun preventDefault ne bloque ce défilement. Stop utilise la même fonction. Un trajet interrompu ne force pas le focus en haut.

prefers-reduced-motion est vérifié à chaque activation. Si demandé, la durée est zéro et le même traitement de fin déplace le focus. Les effets globaux jQuery restent tels quels.

focus({ preventScroll: true }) évite un second changement de position. Une destination autre que le haut absolu exige un calcul propre, incluant un en-tête fixe éventuel. Changer seulement l’id ne suffit pas.

Adapter à un site existant

Vérifiez un id="top" existant et la correspondance du lien. Limitez sélecteurs et espaces de noms pour préserver les autres comportements. Commande 900px, statut et hauteur artificielle sont des aides d’exercice.

Ne combinez pas scroll-behavior:smooth CSS et animation jQuery sur le même trajet. Ici auto laisse jQuery régler la durée. Sans jQuery, window.scrollTo() avec smooth est possible ; adaptez fin et focus à cette méthode.

Sans mouvement, vérifiez l’espace défilant, un éventuel conteneur intérieur et le chargement complet. Examinez texte, contraste, cible tactile et chevauchements fixes. Gardez un href utilisable plutôt que javascript: ou une adresse vide.