jQuery / Einen sanften Zurück-nach-oben-Link erstellen

Erstellen Sie einen echten Link href="#top" und ergänzen Sie jQuery .animate({ scrollTop: 0 }) am Scrollelement des Dokuments. Verhindern Sie den sofortigen Standardsprung, behalten Sie aber den Anker ohne JavaScript. Beachten Sie reduzierte Bewegung und fokussieren Sie nach Abschluss die obere Überschrift.

Scrollelement und Grundlink wählen

Das Beispiel bewegt die ganze Seite. document.scrollingElement liefert deren tatsächliches Scrollelement, im Standardmodus die Dokumentwurzel. Behalten Sie <!doctype html>. Ein Ziel vermeidet getrennte Effekte und Rückrufe auf html und body.

Die Überschrift erhält id="top", der Link das passende Ziel. tabindex="-1" erlaubt programmatischen Fokus ohne zusätzlichen normalen Tab-Stopp. Scrollen allein könnte den Fokus unten lassen, daher sind Bewegung und Fokus getrennt.

Vollständiges Ein-Datei-Beispiel

Speichern Sie alles in UTF-8 als back-top-demo.html und öffnen Sie es im Browser. Internet lädt die offizielle Vollversion 4.0.0. Animation benötigt effects, nicht Slim. Server oder Installation sind unnötig.

Go to 900px schafft die Vergleichsposition; der Link unten rechts bleibt nutzbar. Eine kurze Seite könnte nicht scrollen, deshalb enthält die Übung ausreichende Höhe. Die feste Werkzeugleiste ist für den Versuch; vermeiden Sie auf echten Seiten Überschneidungen mit Kopfzeilen oder Werbung.

<!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>

Anfangsausgabe oben. Die Rundung betrifft nur die Anzeige, nicht die Berechnung der Animation.

scrollY=0
completed=0
state=ready

1. Go to 900px stellt die Position her. Verkleinern Sie bei zu hohem Viewport dessen Höhe.
2. Back to top bewegt normalerweise 600ms lang. scrollY sinkt über Zwischenwerte auf null, completed=1 und state=done.
3. Die Überschrift zeigt den Fokusrahmen. Prüfen Sie auch den unteren Link mit Tastaturfokus und Enter.
4. Wiederholte Klicks ab 900 stapeln keine Reisen: Der alte Effekt stoppt und beginnt an aktueller Position neu.
5. Stop movement unterbricht mit state=interrupted. Erneut starten Sie am Link oder stellen mit Go to 900px den Vergleich wieder her.

Bedienung, Tastatur, Wiederholungen, Stopp und reduzierte Bewegung wurden mit 3.7.1 und 4.0.0 in Windows Edge ausgeführt. Eine separate Prüfung ohne JavaScript folgte dem #top-Anker.

Wiederholungen, Unterbrechung und Bewegung

Das .animate()-Ziel ist die Zahl 0. Ohne event.preventDefault() konkurriert der Standardsprung mit Animation. .stop(true, false) leert die Warteschlange und stoppt ohne Abschluss am Ziel. Wiederholungen beginnen aktuell neu und führen alte Rückrufe nicht aus.

Mausrad, Touchbeginn und Scrolltasten rufen interrupt() auf und geben die Bedienung frei. preventDefault blockiert dabei nicht das Scrollen. Stop verwendet dieselbe Funktion; bei Unterbrechung wird kein Fokus nach oben erzwungen.

prefers-reduced-motion wird je Aktivierung geprüft. Bei reduzierter Bewegung ist die Dauer null, der Fokusabschluss bleibt gleich. Globale jQuery-Einstellungen werden nicht verändert.

focus({ preventScroll: true }) verhindert eine zweite Positionsänderung. Andere Ziele als absolut oben benötigen eigene Koordinaten und gegebenenfalls feste Kopfzeilenabstände. Nur die id auszutauschen genügt dafür nicht.

Auf bestehende Seiten übertragen

Prüfen Sie vorhandene id="top" und passende Ziele. Begrenzen Sie Selektoren und Namensräume, um andere Handler und CSS zu erhalten. 900px-Steuerung, Status und künstliche Höhe sind Übungshilfen.

Kombinieren Sie nicht CSS scroll-behavior:smooth und jQuery für dieselbe Bewegung. Hier steuert jQuery bei auto die Zeit. Ohne jQuery kann window.scrollTo() mit smooth passen; Abschluss und Fokus müssen dazu gestaltet werden.

Ohne Bewegung prüfen Sie Scrollraum, innere Container und vollständiges jQuery. Achten Sie auf Linktext, Kontrast, mobile Trefferfläche und feste Überlagerungen. Behalten Sie einen echten href-Anker statt javascript: oder leerer Adresse.