HTML: Scroll-to-top-Button geht nicht?
Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.
In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:
<script>
const btnScrollToTop = document.querySelector("#btnScrollToTop")
btnScrollToTop.addEventListener("click", function() {
windows.scrollTo(0, 0);
});
</script>
Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?
P.S.: Das ist das erste Mal, dass ich JS benutze.
Der Quelltext wurde leider in zwei Stücke gerissen, weil eine leere Zeile dazwischen war. xD
2 Antworten
Dein Fehler liegt darin, dass du windows statt window geschrieben hast. Mit dem type-Attribut hat es nichts zu tun. Dieses bekommt bereits standardmäßig den Wert text/javascript zugeordnet.
Wie von glasair bereits angemerkt, darf nicht vergessen werden, dem Button das id-Attribut mit dem Wert btnScrollToTop zuzuordnen.
Muss man JS im Head mit einem <Link> einbinden, sowie man das mit .css macht?
Nein, über den link-Tag wird JavaScript nicht eingebunden. Nur über den script-Tag.
<!-- include js file ... -->
<script src="path/to/script.js"></script>
<!-- inline js -->
<script>
console.log("Hello world!");
</script>
Da dein Skript deinen Button im DOM suchen soll, sollte es nach dem Button eingebunden werden (also bspw. am Ende des body-Bereichs). So ist garantiert, dass der Button dem DOM zugefügt wurde, bevor das Skript läuft.
Muss man JS im Head mit einem <Link> einbinden, sowie man das mit .css macht?
Bei inline-JS (in einem script-Tag) ist das nicht notwendig. Hast du dem Button auch die richtige ID (in dem Fall "btnScrollToTop") gegeben? Denn ohne geht es nicht.
Sonst sehe ich da keinen Fehler.
Nachdem ich type="text/javascript" in <script> eingefügt habe, hat es geklappt. Trotzdem danke für die Antwort.