CSS - Mehr Raum bei Anchor-Sprüngen

Bei Anchor Sprüngen lassen die Browser oft oben keinen Platz mehr. Das sieht oft sehr hässlich aus oder die Überschriften werden nicht mehr angezeigt. Unbrauchbar wenn ein statisches Element (z.B. statische Navigation) oben steht, die dann einen Teil des Inhalts verdeckt.

Besser man läßt etwas Raum zum Anchor. Das geht mit Javascript oder mit CSS:

http://css-tricks.com/hash-tag-links-padding/ (2015-02)

In der CSS Variante nutzt man ein Pseudoelement (:before) um davor Raum zu geben und diesen dann mit negativem Margin wieder zu neutralisieren. Im Ergebnis läßt der Browser beim anspringen des Anchors dann den vorher definierten Raum übrig.

HTML

<a href="#goto">Jump</a>

<!-- yadda yadda yadda -->

<h2 id="goto">Header</h2>

CSS

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}