Nach Klick sollte verlinktes Element im Zentrum des Fensters sein

[Gunnar Bittersmann]

@@Linuchs

in meinem Geneology-Projekt habe ich eine HTML-Tabelle aller Personen mit z.B. <tr id=id125>

Wenn ich nun auf eine Zeile verlinke, wird sie am oberen Fensterrand dargestellt, verdeckt von dem sticky thead. Gibt es eine Möglichkeit, die top-Positionierung der Zeile zu beeinflussen?

Ja, scroll-padding-top ist dein Freund.

Die Höhe des Headers kannst du i.a.R. aber nicht kennen, du musst sie also mit JavaScript auslesen. Die Höhe des Headers kann sich beim Ändern der Fenstergröße ändern (Menü braucht bspw. unterschiedlich viele Zeilen), da bietet sich ein ResizeObserver an.

Da man am besten CSS-Eigenschaften nicht mit JavaScript direkt ändert, bietet es sich an, eine custom property zur Datenübergabe zu nutzen. So wie in diesem Posting ganz unten.

Im Stylesheet steht dann bei mir

html {
	scroll-padding-top: var(--header-height);
	overflow: auto;
}

Beispiel: Tribbles ganz oben.

(Wenn man auf der Seite ist, nochmal refreshen. Das JavaScript muss ja erst durchlaufen, bevor der interne Anker angesprungen wird.)

🖖 Живіть довго і процвітайте