Ankerpunkte mit Abstand von oben

[AzRaIL]

Nabend,

habe eine Navigation die zu Ankern auf der Seite scrollt.
Habe jedoch auch einen Header mit einer festen Höhe am oberen Rand.
Wenn ich nun zu den Ankern scrolle landen diese ganz oben auf der Seite, sollten aber unter dem Header landen.
Gibt es die Möglichkeit einen "unsichtbaren" Abstand nach oben einzubauen sodass die Anker immer x Pixel vom oberen Rand aus landen?
Meine Struktur sieht so aus:

<ul>
      <li><a href="#artikel1">Artikel 1</a></li>
      <li><a href="#artikel2">Artikel 2</a></li>
      <li><a href="#artikel3">Artikel 3</a></li>
      <li><a href="#artikel4">Artikel 4</a></li>
</ul>

<a id="artikel1"></a>
<div>
-- INHALT --
</div>
<a id="artikel2"></a>
<div>
-- INHALT --
</div>
<a id="artikel3"></a>
<div>
-- INHALT --
</div>
<a id="artikel4"></a>
<div>
-- INHALT --
</div>

lg

 

[threadi]

Ich würde dir raten die ID dem <div> zu geben, das <a> ist da unnötig. Dann könntest Du den <div>'s jeweils einen padding-top geben und Du hast deinen Abstand.

 

[AzRaIL]

Damit hätte ich dann aber einen sichtbaren Abstand in jedem div oder?

Hab es nun so gelöst bekommen dass ich die Anker in <h1> tags gepackt habe
h1 position: relative;
h1 a position: absolute; top: -100px;
Das funktioniert auch gut