Scrollen per JavaScript: Wie nach Sprung zu Anker Seiteninhalt um 20px nach unten verschieben?

[Rolf B]

Hallo Oli,

ein Sprung zu einem Anker löst das hashchange Event aus, weil sich die Anker-ID dann in der URL als Hash-Teil wiederfindet.

Beispiel: Du bist auf der Seite http://example.org/mypage.html. Dort ist ein Link <a href="#foo">Follow me</a>, und irgendwo ein Link-Ziel <h2 id="foo">You got me</h2>.

Klick auf den Link setzt dieses h2 Element an den oberen Fensterrand, sofern darunter genug Inhalt folgt. Andernfalls natürlich nicht.

UND: Die URL ändert sich in http://example.org/mypage.html#foo

Das löst das hashchange Event aus (der Hash-Teil der URL wird anders), und im Event-Objekt findest Du die Eigenschaften oldURL und newURL, das ist die Seitenadresse vor und nach dem Klick auf den Link. Mit new URL(event.newURL) bekommt Du ein URL-Objekt zur neuen URL, das hat eine Eigenschaft namens hash, und du weißt auch welche ID angesprungen wurde.

Ob Du nun um 20 Pixel scrollen musst oder um einen anderen Wert, hängt von einigen Aspekten ab, z.B. von Basis-Fontgrößen im Browser, vielleicht auch von der Viewportgröße. Ich nehme an, du hast einen Header mit position:fixed und willst sicherstellen, dass die angesprungene ID dahinter nicht verschwindet. Du musst nach jedem hashchange die Größe dieses Headers ausmessen und den scroll entsprechend durchführen.

Gunnar hat dazu mal einen Codepen gemacht

Ob der auch funktioniert, wenn die Seite gleich mit Hash-Teil in der URL aufgerufen wird, das weiß ich nicht und habe gerade keine Probierseite da.

Rolf