Back-to-Top-Button Script ohne JQuery

[Gunnar Bittersmann]

@@oxo888oxo

Ich habe mich entschlossen, einen so genannten Back-to-Top-Button auf meiner Website einzubauen.

<a href="#">, und es kann auch mehrere davon geben.

Alle auswählen (document.querySelectorAll('[href="#"]')) und für alle einen Eventhandler definieren. Darin die Standardaktion unterbinden (preventDefault()) und das zu scrollende Element (bei mir main) per transform: transitionY() genau um window.pageYOffset Pixel verschieben. Da per Stylesheet auf transform eine Transition gesetzt ist, scrollt der Inhalt langsam zum Seitenanfang.

Dort angekommen, wird transform wieder zurückgesetzt und der richtige Link zum Seitenanfang ausgeführt. Nur die Scrollbar verhält sich dabei etwas merkwürdig.

Codepen: smooth scrolling to top

LLAP 🖖