JavaScript Nach oben scrollen

Mit window.scrollTo(0, 0) springt die aktuelle Seite an den Anfang. Um die Aktion mit einer Schaltfläche zu verknüpfen, fügen Sie einen Klick-Listener hinzu. Soll der Browser den Bildlauf stattdessen animieren, übergeben Sie { top: 0, behavior: "smooth" }.

Mit window.scrollTo() zum Seitenanfang springen

Dieses Beispiel erstellt eine eigene Schaltfläche und verknüpft sie anschließend mit window.scrollTo(). Fügen Sie das Skript auf einer Seite ein, nachdem der Dokumentkörper verfügbar ist, oder laden Sie es mit defer, damit die Schaltfläche zum Dokument hinzugefügt werden kann. Die kleinen Ersatzobjekte ermöglichen die Ausführung des Beispiels in einer Node-Testumgebung; im Browser verwendet es das echte document und window der Seite.

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)

Die beiden Argumente geben die horizontale und vertikale Scrollposition an. Setzen Sie beide auf 0, um die Seite in die obere linke Ecke zurückzusetzen. Verwenden Sie diese sofortige Variante, wenn der Sprung direkt erfolgen soll, etwa nach einer kurzen Aktion, bei der eine Animation stören würde.

Mit window.scrollTo() sanft scrollen

Übergeben Sie window.scrollTo() ein Optionsobjekt, um einen sanften Bildlauf anzufordern. Diese eigenständige Variante verwendet dieselben kleinen Ersatzobjekte für Node, damit sich der Klick-Handler auch außerhalb eines Browsers veranschaulichen lässt:

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)

Die Eigenschaft top legt das vertikale Ziel fest. Mit behavior: "smooth" wird der Browser gebeten, den Bildlauf zu animieren. Die native Optionsvariante bietet keine Einstellung für die Dauer. Wenn Sie eine bestimmte Dauer benötigen, verwenden Sie eine Bibliotheksanimation oder implementieren Sie eine eigene Animation. Eine CSS-Regel auf Seitenebene wie html { scroll-behavior: smooth; } kann auch gewöhnliche Bildläufe sanft gestalten, erstellt aber weder eine Schaltfläche noch allein eine Aktion zum Zurückkehren an den Seitenanfang.

Mit einem Ankerlink zum Seitenanfang springen

Ein Anker ist eine nützliche Möglichkeit ohne JavaScript. Geben Sie dem Seitenanfang eine ID, zum Beispiel <header id="page-top">, und verlinken Sie mit <a href="#page-top">Back to top</a> darauf. Beim Aktivieren des Links wird zu diesem Fragment navigiert, das URL-Fragment aktualisiert und der Browser bewegt den Fokus beziehungsweise die Navigation gemäß seinem Verhalten zum Ziel. Verwenden Sie ein Ziel, das auf der Seite nur einmal vorkommt. Verdeckt ein fixierter Header das Ziel, können Sie dies mit CSS berücksichtigen, etwa mit scroll-margin-top am Zielelement.

Mit jQuery zum Seitenanfang scrollen

Wenn die Seite bereits jQuery lädt, kann dessen Methode animate() die Eigenschaft scrollTop der scrollenden Dokumentelemente animieren. Dieses Beispiel fügt eine Schaltfläche hinzu und bindet die Animation daran. Laden Sie jQuery im Browser vor diesem Skript; fehlt die Bibliothek, gibt das Beispiel eine verständliche Fehlermeldung aus. Das kleine Ersatzobjekt wird ausschließlich in der Node-Testumgebung verwendet.

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)

Hier ist scrollTop: 0 das Ziel und 800 die Animationsdauer in Millisekunden. jQuery ist eine optionale Abhängigkeit. Verwenden Sie die native Methode, wenn die Seite die Bibliothek nicht ohnehin benötigt. Berücksichtigen Sie die Einstellung für reduzierte Bewegung der Besucher, wenn Sie eine eigene Animation oder andere Bewegungseffekte hinzufügen.

Den passenden Ansatz wählen

Verwenden Sie window.scrollTo(0, 0) für einen direkten Sprung mit JavaScript. Wählen Sie die Optionsvariante, wenn ein sanfter Bildlauf hilfreich ist und eine vom Browser gesteuerte Dauer ausreicht. Verwenden Sie einen Anker, wenn die Aktion ohne JavaScript wie eine gewöhnliche Seitennavigation funktionieren soll. Wählen Sie jQuery, wenn die Bibliothek bereits zum Projekt gehört und die Dauerangabe zur Interaktion passt. Rufen Sie in einer Single-Page-Anwendung die native Methode nach einem Routen- oder Ansichtswechsel auf, falls die Anwendung die Scrollposition nicht bereits verwaltet. Sorgen Sie bei einem normalen Link oder einer Schaltfläche dafür, dass dessen Zweck für unterstützende Technologien klar ist und Tastaturnutzer ihn aktivieren können.