Anker Links zielgenau setzen

[_Antonia]

Hallo,

ich möchte diverse Anker-Links setzen. Grob gelinkt mir das, aber ich bin mit dem Ergebnis nicht zufrieden.

Ich benötige es z.B. an 2 Stellen

Variante 1)

Bei jedem Produkt wird "Produktsicherheit" verlinkt und führt zu einer Seite, auf der alle gesammelten Hinweise sind. Ich möchte bei Produkt A z.B. zur exakten Stelle der dazugehörigen Infos kommen. Aktuell ist das Rich text Feld verlinkt und man landet optisch mittendrin. Ich möchte aber, dass es oben bei der Headline startet und man nicht nur die Mitte des Blocks angezeigt bekommt.

Ich habe es schon versucht z.B. ein Spacer Element darüber zu verlinken (z.B. mit id="shopify-section-template--24481258995979__spacer_c7NTLb), aber auch dann liegt das eigentlich verlinkte Element außerhalb des Sichtbereichs und im ersten Screenbereich ist einfach eine Stelle mitten im Textfeld.

Variante 2)

Ich möchte bei Blogartikeln oben eine kurze Übersicht der folgenden Headlines haben und wenn man drauf klickt zur exakten Stelle geführt werden. Aber auch da ist das gleiche Problem. 

Zusätzlich ist es so, dass ich gerne unterschiedliche Headlines innerhalb eines Rich text Elements verlinken möchte und nicht für jedes ein eigenes Element anlegen will, da es sonst mit der Begrenzung von 25 Sections eng wird.
Auch hier soll es so sein, dass die jeweilige Headline in den obersten Screenbereich rutscht, wenn man auf den Anker Link klickt.

Wie gelingt mir dies?

Viele Grüße + Danke,
Antonia

[Ben310]

Du musst halt damit rumspielen wie z. B. platziere HTML-ID oberhalb der Headline, nicht an die Headline selbst, sondern 10–100px höher, wie z. B. mit dem folgenden <div> und position: relative:

<div style="position: relative; top: -100px;" id="produktsicherheit-a"></div>

Dann den Scroll-Offset global mit JavaScript korrigieren für alle Anker-Links. Kann jeder Experte für dich machen.