scrollTo() – Springen zu vorgegebenen Koordinaten

Über die JavaScript-Anweisung scrollTo() kann der Fensterinhalt zu den angegebenen Koordinaten bewegt werden.

Der grundlegende Aufbau des JavaScript-Befehls sieht wie folgt aus:

window.scrollTo(X-Position, Y-Position);

Die Methode scrollTo() gehört auch zu den Browserobjekt „window“. Das Verhalten kann direkt in der Konsole getestet werden. Über die folgende Angabe springt der Anzeigebereich um 100 Pixel nach rechts und um 150 Pixel nach unten (sofern er es kann).

window.scrollTo(100,150);

Die Randbemerkung „sofern er es kann“ ist wichtig. Füllt der Inhalt bereits komplett die Fensterbreite bzw. die Fensterhöhe, dann erfolgt auch kein verschieben. Die folgende Anweisung, damit wieder der oberste linke Punkt angezeigt wird funktioniert also erst, wenn der Inhalt wenigstens ein Stück nach unten verschoben wurde.

window.scrollTo(0,0);

Sehr oft passt sich der Inhalt der verfügbaren Fensterbreite im Rahmen von Responsible Design und guter Nutzbarkeit auf dem Handy automatisch über CSS an. Da wird es dann nichts mit dem Scrollen nach rechts oder links. Einfach einmal testen.

Es wird also mit der Anweisung scrollTo() der Anzeigebereich des Browserfensters immer an eine bestimmte Koordinate bewegt (sofern möglich). Möchte man den Anzeigebereich um eine bestimmte Pixelanzahl einfach bewegen (sprich gehe 100 Pixel nach unten – nicht springe an den Punkt, der sich 100 Pixel unterhalb von 0 befindet) gibt es die JavaScript-Anweisung scrollBy() - die wird in einem anderen Kapitel besprochen.

Feinheiten zu scrollTo() – sanftes Scrollen

Über CSS kann das sanfte Scrollen „eingeschaltet“ werden. Dazu findet sich im HTML-Seminar unter https://www.html-seminar.de/css-scroll-behavior-smooth.htm die entsprechenden Informationen. Wir wollen aber mit JavaScript ein sanftes Scrollen bewerkstelligen.

Daher noch ein paar Feinheiten zu scrollTo(). Es kann noch ein weiterer Wert bei dieser JavaScript-Anweisung mitgegeben werden. Wir haben also eigentlich folgenden Aufbau (bitte die geschweiften Klammern beachten):

window.scrollTo(
    {
        X-Position, 
        Y-Position, 
        [Scroll-Verhalten]
    }
);

Alle Angaben werden in geschweiften Klammern übergeben und die letzte Angabe in den eckigen Klammern ist Optional und gibt das Verhalten des Browsers beim Scrollen an. Hier kann mitgegeben werden, dass ein sanftes Scrollen erfolgt und nicht das standardmäßig ruppige Springen. Allerdings gleich der Wermutstropfen: einige Browserhersteller haben diese Option nicht im Browser integriert – dazu gehören der Microsoft Explorer und Safari. Allerdings erfolgt der Sprung zu dem angegebenen Bereich in diesen Browsern trotzdem – nur wie gewohnt ruppig.

window.scrollTo({top: 100, left: 0, behavior: "smooth"});

Um jetzt auch eine Browser-Unterstützung für IE und Safari für das weiche Scrollen zu erhalten haben einige findige Programmierer für diese Browser Programme geschrieben (oft in JavaScript), die nachträglich diese Funktionalität einbauen. Hier spricht man von Workarounds bzw. von „Polyfill“ – dieses Wort kommt von einer Spachtelmasse, die „Schäden“ an Mauern ausbessert - im deutschen (ohne jetzt Werbung machen zu sollen) bietet das das bekannte Produkt Moltofill. Wer die Funktion also auch für diese Browser integrieren möchte, einfach einmal eine Suchmaschine mit den Wörtern „Polyfill scrollTo“ füttern. Ein bekanntes Polyfill kommt von http://iamdustan.com/smoothscroll/ bzw. unter GitHub https://github.com/iamdustan/smoothscroll