Anker Links zielgenau setzen

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Problem: Anchor links are not positioning content accurately on the page. When clicked, users land in the middle of content blocks instead of at the intended headline or section start.

Two specific use cases:

  1. Product safety links: Each product links to a collective safety information page, but should jump to the specific product’s section with the headline visible at the top of the screen.

  2. Blog article navigation: A table of contents at the top should link to headlines within the article, with each headline appearing at the top of the viewport when clicked.

Additional constraint: Multiple headlines within a single Rich Text element need linking without creating separate sections (to avoid the 25-section limit).

Suggested solution: Place HTML anchor IDs above headlines (10-100px higher) using positioned <div> elements with position: relative and negative top values. Additionally, implement global JavaScript to adjust scroll offset for all anchor links. Professional developer assistance recommended for implementation.

Status: Awaiting further responses or implementation.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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

2

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

und position: relative:

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