Scrollen per JavaScript: Wie nach Sprung zu Anker Seiteninhalt um 20px nach unten verschieben?
bearbeitet von
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](https://codepen.io/gunnarbittersmann/pen/NYqmVp)
_Rolf_
--
sumpsi - posui - clusi