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

[Oli]

Ich bin JavaScript Anfänger.

Könnt Ihr mir Stichworte zum Lösen meines Problems geben? Insbesondere weiß ich nicht welches Event ich abfangen muss.

1. Ob per JavaScript oder jQuery ist mir egal.
2. Die Lösung soll auch auf dem Smartphone funktionieren.
3. window.scrollBy(0, -20); muss ich offenbar nutzen.

[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

[MudGuard]

Hi,

Könnt Ihr mir Stichworte zum Lösen meines Problems geben?

Den Anker um den entsprechenden Wert weiter oben positionieren.

(wäre die CSS-Lösung, ganz ohne Javascript)

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

das hatte ich mit Gunnar auch schon diskutiert, es setzt aber eine fixe Höhe des Headers voraus. Einflüsse der font-size kann man im CSS ausgleichen, aber Zeilenumbrüche nicht.

Rolf

[Oli]

Beides sehr schöne Lösungen. In meinem Fall passt auch die einfache CSS-Lösung.