CSS, HTML & Javascript mit {stil}

Javascript scrollIntoView

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, scrollBy und scroll scrollen das Browserfenster zu einer Position oder um eine bestimmte Strecke.

Javascript Scrollen: scroll into view

behavior smooth

Ein a-Tag mit einer internen Adresse via id-Attribut ist älteste und einfachste Verfahren für einen Sprung innerhalb der Seite. Das auslösende HTML-Element braucht eine Sprungadresse und das Zielelement eine passende id.

<a href="#area1">Zu Absatz 4</a>
	…	…	…

<div class="area" id="area1"> … … … </div>

Für den Sprung sorgt HTML allein. Weiches Scrollen – CSS scroll-behavior smooth anstelle des unvermittelten Sprungs – gibt dem Benutzer eine bessere Orientierung und poliert das Verhalten auf. Bis sich CSS scroll-behavior: smooth in den Browsern etablierte, gab es zahlreiche 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.

Javascript behavior: "smooth" ist erst später zu den klassischen Window-Methoden scrollTo, scrollBy und scroll hinzugekommen und wird nicht von IE11 unterstützt. Kein Grund, auf den kleinen Komfort zu verzichten: Der Sprung funktioniert weiterhin in IE, nur eben nicht mit weichem Scrollen.

window scrollBy, scrollTo

Die Javascript-Funktionen scrollBy und scrollTo springen zu den angegebenen Koordinaten, denn das vorgegebene Scroll-Verhalten ist scroll-behavior: 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" });
}

scroll (x,y)

scrollt zu einer Position x,y des Dokuments: x Pixel auf der horizontalen Achse, y Pixel auf der vertikalen Achse, Nullpunkt ist oben links.

window.scroll (1000,200);

oder 

window.scroll({
	top: 1000,
	left: 200,
	behavior: 'smooth'
});

scrollIntoView

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

<li><a href="#area1">Zu Area 1</a></li>
<li><a href="#area2">Zu Area 2</a></li>
<li><a href="#area52">Zu Area 52</a></li>

Mit elem.scrollIntoView() entfällt der Hash-String der URL, der bei einem Sprung mittels HTML-Anker entsteht. 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.

const target = document.querySelectorAll('a[href^="#"]');
for (const item of target) {
	item.onclick = function (e) {
		const hash = this.getAttribute("href");
		const 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 42?

scroll-margin-top

CSS scroll-margin bewirkt einen Abstand zum angesteuerten Ziel der Scrollaktion. Mit scroll-margin-top schnappt das Target mit einem Abstand zum oberen Rand ein.

.area:nth-of-type(1) { scroll-margin-top: 2rem; }
.area:nth-of-type(2) { scroll-margin-top: 2rem; }
.area:nth-of-type(3) { scroll-margin-top: 2rem; }

Weitere Optionen für scroll-margin:

  • scroll-margin-top, scroll-margin-bottom, scroll-margin-left, scroll-margin-right,
  • scroll-margin-block, scroll-margin-block-end, scroll-margin-block-start.

Unterstützt von allen modernen Browsern.

prefers-reduced-motion

Einigen Besuchern kann von der Animation schwindlig werden. Dagegen kann die CSS Media Query prefers-reduced-motion abgefragt werden.

.smooth-scroll-area {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.smooth-scroll-area {
		scroll-behavior: auto;
	}
}

Browser-Unterstützung

scrollIntoView wird von allen Browsern unterstützt (IE seit Version 9); behavior smooth allerdings nicht von IE. Das Polyfill iamdustan/smoothscroll verhilft den Hardlinern ebenfalls zum weichen Scrollen (wenn's denn sein muss).

Abfragen, ob der Browser smooth scroll unterstützt
const smoothScrollSupported = 'scrollBehavior' in document.documentElement.style;

oder mit CSS.supports (neuer, nicht IE11)

//gibt false zurück, wenn scroll-behaviour: smooth nicht unterstützt wird
const smoothScrollSupported = CSS.supports ("behavior","smooth"); //
Suchen auf mediaevent.de