Javascript scrollIntoView

Browserfenster zu einem Element scrollen: scroll into view

scrollIntoView scrollt ein Element in den sichtbaren Bereich des Browserfensters, ähnlich wie das der Sprung mit a href="#id" zum Element mit der ID, aber ohne das Sprungziel mit #id in der Navigationsleiste des Browsers zu setzen.

scrollTo und scrollBy scrollen das Browserfenster zu einer Position oder um eine bestimmte Strecke.

scroll-behaviour smooth

Ein a-Tag mit einer internen Adresse via id-Attribut ist älteste und einfachste Verfahren für einen Sprung innerhalb der Seite.

Weiches Scrollen – smooth scrolling – anstelle des unvermittelten Sprungs gibt dem Benutzer eine bessere Orientierung und poliert das Verhalten auf. Es gibt zahllose Scripte, die ein weiches Scrollen zu einem Bookmark innerhalb der Seite implementieren, aber sie beruhen fast immer auf einer Animation der scrollTop-Position und sind selten effizient.

scroll-behaviour ist erst später zu den klassischen Window-Methoden scrollTo und scrollBy hinzugekommen und wird aktuell nur von Chrome und Firefox unterstützt. Kein Grund, auf den kleinen Komfort zu verzichten: Der Sprung funktioniert weiterhin in Safari, IE und Edge.

window scrollBy, scrollTo

Die Javascript-Funktionen scrollBy und scrollTo springen zu den angegebenen Koordinaten, denn das vorgegebene Scroll-Verhalten ist scroll-behaviour: auto, also kein weiches Scrollen, sondern der direkte Sprung.

Für weiches Scrollen sorgt erst behavior: smooth.

button.onclick = function() { 
	window.scrollBy({ top: 300, left: 0, behavior: "smooth" });
}
button.onclick = function() {
	window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}

scrollIntoView

Der Sprung mit scrollIntoView fügt der Adresse in der Navigationsleiste des Browsers keine Sprungmarke hinzu und kann ebenfalls durch scroll-behavior smooth weich animiert werden.

<ul>
    <li class="target" id="toarea1">Zu Aria 1</li>
    <li class="target" id="toarea2">Zu Aria 1</li>
    <li class="target" id="toarea52">Zu Aria 52</li>
</ul>
(function () {
"use strict";
let target = document.querySelectorAll('a[href^="#"]');
let i = 0;
for (i=0; i<target.length; i++) {
   target[i].onclick = function (e) {
      let hash = this.getAttribute("href");
      let elem = document.getElementById(hash.replace("#",""));
      //history.pushState (null, null, hash);
      elem.scrollIntoView({ left: 0, block: 'start', behavior: 'smooth' });
      e.preventDefault();
	}
}
})();

Area 1

Area 2

Area 52

Mit elem.scrollIntoView() entfällt der Hash-String der URL. Weil auch kein Event feuert, wenn das Scrollziel erreicht ist, kann das Script den Hash zur URL nicht manuell nachführen. Anstelle dessen kann die Browser-History mit history.pushState (null, null, hash) herhalten.

Browser-Unterstützung

scrollIntoView wird von allen Browsern unterstützt (IE seit Version 9); scroll-behaviour smooth allerdings nur von Chrome und Firefox. Das Polyfill iamdustan/smoothscroll verhilft IE, Safari und Edge ebenfalls zum weichen Srollen.