Vor mehr als 9 Jahren schrieb ich einen Blog-Beitrag darüber, wie man die „JavaScript Performance bei Scroll-Event-Handlern verbessern“ kann. Damals haben viele ein Plugin wie „WP-Smooth-Scroll“ verwendet (das es immer noch gibt, aber das seit 11 Jahren nicht mehr aktualisiert wurde). Smooth Scrolling wurde oft in Kombination mit einem „Scroll to top“ Button verwendet. Der Scroll-Effekt wurde mit der Funktion scrollTop() von jQuery erzeugt. Heutzutage wird jQuery nicht mehr so häufig verwendet. Aber das Scrollen mit JavaScript gibt es immer noch.

Scrollen einer Seite mit JavaScript

Neben den Schaltflächen zum Scrollen nach oben kann eine Website auch das Smooth Scrolling auch für Ankerlinks verwenden. Wenn ihr es in Aktion sehen wollt, brauchen ihr nur in der Datei wp-includes/js/admin-bar.js im WordPress Core nachsehen, wo ihr diese Funktion vorfindet:

/**
 * Scrolls to the top of the page.
 *
 * @since 3.4.0
 *
 * @param {Event} event The Click event.
 *
 * @return {void}
 */
function scrollToTop( event ) {
	// Only scroll when clicking on the wpadminbar, not on menus or submenus.
	if (
		event.target &&
		event.target.id !== 'wpadminbar' &&
		event.target.id !== 'wp-admin-bar-top-secondary'
	) {
		return;
	}

	try {
		window.scrollTo( {
			top: -32,
			left: 0,
			behavior: 'smooth'
		} );
	} catch ( er ) {
		window.scrollTo( 0, -32 );
	}
}

Wie ihr im Kommentar ersehen könnt, gibt es diese Funktion schon seit WordPress 3.4, das im Juni 2012 veröffentlicht wurde! Das behavior: "smooth" gibt es in Firefox erst seit 2015 und in Chrome seit 2017. Aber auch heute noch können ihr auf die „Admin Bar“ klicken (auf irgendetwas anderes als einen Link) und die Website scrollt „smooth“ nach oben.

Das Problem mit der Methode

Wie wir im obigen Code sehen können, übergibt man der scrollTo() Funktion ein Objekt mit der genauen Scroll-Position im Viewport. Für die WordPress „Admin Bar“ ist das einfach, da sie am oberen Rand der Seite klebt. Wenn wir aber über einen Ankerlink zu einem anderen Element auf der Seite scrollen wollen, müssen wir die Position berechnen. Erinnert ihr sich an unseren letzten Blog-Beitrag zum Thema CSS, „Wie man Fehler mit einem „Sticky Header“ behebt„? Wenn wir sicherstellen wollen, dass die Scroll-Position korrekt ist, müssen wir auch das scroll-margin-top Offset berücksichtigen.

Ein alternativer JavaScript-Ansatz

Es gibt noch eine andere Scroll-Funktion, die ebenfalls schon seit vielen Jahren existiert: die Funktion scrollIntoView(). Bei dieser Funktion müssen wir die Position nicht berechnen. Wir wählen einfach das Element aus, zu dem wir scrollen wollen, und wenden die Funktion darauf an:

const element = document.getElementById("some-anchor");
element.scrollIntoView();

Das Tolle an dieser Funktion ist, dass man ihr sogar mitteilen kann, wo das Element platziert werden soll. Und sie berücksichtigt scroll-margin-top oder ähnliche Eigenschaften. Auf der Dokumentationsseite gibt es noch einige weitere Beispiele. Eine dieser anderen CSS-Eigenschaften ist diejenige, über die ich in diesem Beitrag schreiben möchte.

Das CSS-Scroll-Verhalten

Auch ohne JavaScript ihr „Smooth Scrolling“ erreichen und ihr braucht dazu nur CSS. Fügen Sie einfach Folgendes zu eurer Seite hinzu:

html {
	scroll-behavior: smooth;
}

Wenn ihr nun auf einen beliebigen Ankerlink klickt, wird die Seite „smoot“ zu diesem Element gescrollt. Und da der Browser genau weiß, wie er das machen soll, erhalten wir immer die perfekte Scroll-Position für dieses Element.

Fazit

Natürlich ihr eine Funktion mit 20 Zeilen wie in WordPress Core verwenden, um einen Smooth Scrolling umzusetzen. Aber ihr könnten auch nur eine CSS-Eigenschaft und normale Ankerlinks verwenden, um das gleiche Ergebnis zu erzielen. Und ich habe euch noch nicht einmal von all den Problemen mit JavaScript-Scrolling erzählt, wie z. B. manuelles Scrollen, während das Smooth Scrolling noch animiert ist, falsche Positionsberechnung aufgrund von Lazy Loading usw. Ich hoffe, das reicht, um Sie vorerst zu überzeugen. 😉