JavaScript Faire défiler vers le haut

Utilisez window.scrollTo(0, 0) pour ramener la page actuelle tout en haut. Pour associer cette action à un bouton, ajoutez un écouteur de clic ; passez { top: 0, behavior: "smooth" } si vous souhaitez que le navigateur anime le défilement.

Utiliser window.scrollTo() pour revenir en haut de la page

Cet exemple crée un bouton, puis le relie à window.scrollTo(). Placez le script dans la page une fois que le corps du document est disponible, ou chargez-le avec defer afin que le bouton puisse être ajouté au document. Le bouton affiche un libellé en anglais, conservé tel quel dans l’exemple. Les petits objets de remplacement permettent d’exécuter l’exemple dans un test Node ; dans un navigateur, il utilise les objets document et window réels de la page.

const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
  body: {
    append(button) {
      button.click = () => button.listeners.click();
    }
  },
  createElement() {
    return {
      listeners: {},
      addEventListener(name, handler) {
        this.listeners[name] = handler;
      }
    };
  }
};
const pageWindow = inBrowser ? window : {
  scrollTo(x, y) {
    console.log(`scrollTo(${x}, ${y})`);
  }
};

const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);

button.addEventListener("click", () => {
  pageWindow.scrollTo(0, 0);
});

if (!inBrowser) button.click();

scrollTo(0, 0)

Les deux arguments indiquent les positions de défilement horizontale et verticale. En donnant la valeur 0 à chacun, vous ramenez la page dans son coin supérieur gauche. Utilisez cette forme pour un déplacement immédiat, par exemple après une action brève pour laquelle une animation serait gênante.

Ajouter un défilement fluide avec window.scrollTo()

Passez un objet d’options à window.scrollTo() pour demander un défilement fluide. Cette version autonome utilise le même petit mécanisme de remplacement pour Node afin de pouvoir présenter le gestionnaire de clic hors d’un navigateur :

const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
  body: {
    append(button) {
      button.click = () => button.listeners.click();
    }
  },
  createElement() {
    return {
      listeners: {},
      addEventListener(name, handler) {
        this.listeners[name] = handler;
      }
    };
  }
};
const pageWindow = inBrowser ? window : {
  scrollTo(options) {
    console.log(`scrollTo(top: ${options.top}, behavior: ${options.behavior})`);
  }
};

const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);

button.addEventListener("click", () => {
  pageWindow.scrollTo({ top: 0, behavior: "smooth" });
});

if (!inBrowser) button.click();

scrollTo(top: 0, behavior: smooth)

La propriété top définit la destination verticale, et behavior: "smooth" demande au navigateur d’animer le défilement. La forme native avec options ne permet pas de régler la durée. Si vous avez besoin d’une durée précise, utilisez l’animation d’une bibliothèque ou créez votre propre animation. Une règle CSS appliquée à la page, comme html { scroll-behavior: smooth; }, peut aussi rendre les défilements ordinaires fluides, mais elle ne crée pas à elle seule de bouton ni d’action pour revenir en haut.

Utiliser un lien d’ancrage pour revenir en haut de la page

Une ancre est une solution utile qui ne nécessite aucun script. Attribuez un identifiant au début de la page, par exemple <header id="page-top">, puis créez un lien vers cet élément avec <a href="#page-top">Back to top</a>. L’activation du lien ouvre le fragment correspondant, met à jour le fragment de l’URL et déplace la navigation ou le focus vers la cible, selon le comportement du navigateur. Choisissez une cible présente une seule fois sur la page ; si un en-tête fixe la recouvre, tenez-en compte avec une règle CSS telle que scroll-margin-top sur la cible.

Utiliser jQuery pour revenir en haut de la page

Si la page charge déjà jQuery, sa méthode animate() peut animer la propriété scrollTop des éléments de défilement du document. Cet exemple ajoute un bouton et lui associe l’animation. Dans un navigateur, chargez jQuery avant ce script ; si la bibliothèque est absente, l’exemple déclenche une erreur explicite. Le petit mécanisme de remplacement est utilisé uniquement par le test Node.

const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
if (inBrowser && typeof globalThis.jQuery !== "function") {
  throw new Error("jQuery is required for this example. Load jQuery before this script.");
}

const $ = inBrowser ? globalThis.jQuery : (selector, attributes) => {
  if (selector === "<button>") {
    return {
      ...attributes,
      appendTo() { return this; },
      on(name, handler) { this.handler = handler; return this; }
    };
  }
  return {
    animate(properties, duration) {
      console.log(`animate(scrollTop: ${properties.scrollTop}, duration: ${duration})`);
    }
  };
};

const button = $("<button>", {
  type: "button",
  text: "Back to top"
}).appendTo("body");

button.on("click", () => {
  $("html, body").animate({ scrollTop: 0 }, 800);
});

if (!inBrowser) button.handler();

animate(scrollTop: 0, duration: 800)

Ici, scrollTop: 0 indique la destination et 800 la durée de l’animation en millisecondes. jQuery est une dépendance facultative ; privilégiez la méthode native si la page n’a pas déjà besoin de cette bibliothèque. Si vous ajoutez une animation personnalisée ou d’autres effets de mouvement, respectez la préférence de l’utilisateur pour la réduction des animations.

Choisir la méthode adaptée

Utilisez window.scrollTo(0, 0) pour revenir directement en haut depuis JavaScript. Choisissez la forme avec options si un défilement fluide est utile et qu’une durée contrôlée par le navigateur vous convient. Utilisez une ancre si l’action doit fonctionner comme une navigation ordinaire sans JavaScript. Choisissez jQuery si cette bibliothèque fait déjà partie du projet et si la durée de son animation convient à l’interaction. Dans une application monopage, appelez la méthode native après un changement de route ou de vue si l’application ne gère pas déjà la position de défilement. Pour un lien ou un bouton ordinaire, indiquez clairement sa fonction aux technologies d’assistance et veillez à ce que les personnes utilisant le clavier puissent l’activer.