Ich habe auf einer Seite eine Kopfleiste, die mit CSS fixiert ist (s. Beispielscript). Werden bestimmte Anker innerhalb der Seite als Linkziel aufgerufen, so wird die Seite erwartungsgemäß so weit gescrollt, dass der Anker an der Seitenoberkante liegt. Das führt aber dazu, dass der Anker nun hinter der Kopfleiste verschwindet. Kennt jemand eine Möglichkeit, mit der die Seite nur so weit gescrollt wird, dass der Anker an der Unterkante der Kopfzeile liegt, damit der Inhalt des folgenden Absatzes auch sichtbar ist? Am besten wäre eine CSS-Lösung. Ich hatte gehofft, dass ich den Browser mit
html { margin-top:100px; } austricksen könnte, ging aber leider nicht. Es soll auch dann funktionieren, wenn sich der Link zum Anker auf einer ganz anderen Seite befindet, und nicht wie im Beispiel auf der gleichen. Zur Not wär JavaScript auch ok, aber ich würde lieber auf JavaScript verzichten.
Vielen Dank!
HTML-Code:
<html>
<head>
<title></title>
<style type='text/css'>
p { color:#000; background-color:#f90; height:200px; margin:0 50px 20px; }
a { color:#fff; margin:0 20px; }
</style>
</head>
<body style='background-color:#047'>
<div style='text-align:center; opacity:.7; padding:20px; height:60px; background-color:#090; position:fixed; left:0; top:0; width:100%'>
<a href='#1'>Anker 1</a>
<a href='#2'>Anker 2</a>
<a href='#3'>Anker 3</a>
<a href='#4'>Anker 4</a>
<a href='#5'>Anker 5</a>
</div>
<div style='margin-top:120px'>
<a name='1'></a><p>Anker 1</p>
<a name='2'></a><p>Anker 2</p>
<a name='3'></a><p>Anker 3</p>
<a name='4'></a><p>Anker 4</p>
<a name='5'></a><p>Anker 5</p>
</div>
</body>
</html>
02.12.2008, 23:48
Scrollposition zu seiteninterner Ankerposition manipulieren
Linear-Darstellung
