rich1.0phorkiehttps://p.cweiske.de/correct anchor scrolling with fixed headerChristian Weiske86400900900<!-- embedding all files of https://p.cweiske.de/224 -->
<link rel="stylesheet" href="https://p.cweiske.de/css/embed.css"/>
<div class="phork" id="224">
<div class="phork-file">
<div class="phork-content">
<div class="document">
<p>Scrolling to a content element via #anchor links is often broken if you have a fixed header or menu.</p>
<p>You can fix this by disabling page scrolling and putting the whole content inside a <tt class="docutils literal"><div></tt> that has <tt class="docutils literal">overflow: auto</tt> set, causing the div alone to get scroll bars. The <tt class="docutils literal">div</tt> has to have a fixed height.</p>
<hr class="docutils" />
<p>Update 2023-08: Setting <tt class="docutils literal"><span class="pre">scroll-margin-top</span></tt> on the id elements solves the problem without any other tags and css rules!</p>
</div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/224/rev-raw/21d122f3953de664e96f17bc406cb238d9cd67ae/README.rst" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/224#README.rst">README.rst</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<style type="text/css">/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2014 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.xml .de1, .xml .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.xml {font-family:monospace;}
.xml .imp {font-weight: bold; color: red;}
.xml li, .xml .li1 {color: #DDD;}
.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.xml .es0 {color: #000099; font-weight: bold;}
.xml .br0 {color: #66cc66;}
.xml .sy0 {color: #66cc66;}
.xml .st0 {color: #ff0000;}
.xml .sc-1 {color: #808080; font-style: italic;}
.xml .sc0 {color: #00bbdd;}
.xml .sc1 {color: #ddbb00;}
.xml .sc2 {color: #339933;}
.xml .sc3 {color: #009900;}
.xml .re0 {color: #000066;}
.xml .re1 {color: #000000; font-weight: bold;}
.xml .re2 {color: #000000; font-weight: bold;}
.xml span.xtra { display:block; }
</style><div class="code"><table class="xml"><tbody><tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
</pre></td><td class="de1"><pre class="de1"><span class="sc3"><span class="re1"><html<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"><head<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><title<span class="re2">></span></span></span>Scrolltest<span class="sc3"><span class="re1"></title<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"></head<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"><body</span> <span class="re0">style</span>=<span class="st0">"border: none; padding: 0px; margin: 0px;"</span><span class="re2">></span></span>
  <span class="sc3"><span class="re1"><h1</span> <span class="re0">style</span>=<span class="st0">"height: 10%; border: none; padding: 0px; margin: 0px;"</span><span class="re2">></span></span>Scrolltest <span class="sc3"><span class="re1"><a</span> <span class="re0">href</span>=<span class="st0">"#one"</span><span class="re2">></span></span>one<span class="sc3"><span class="re1"></a<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><a</span> <span class="re0">href</span>=<span class="st0">"#two"</span><span class="re2">></span></span>two<span class="sc3"><span class="re1"></a<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><a</span> <span class="re0">href</span>=<span class="st0">"#three"</span><span class="re2">></span></span>three<span class="sc3"><span class="re1"></a<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><a</span> <span class="re0">href</span>=<span class="st0">"#four"</span><span class="re2">></span></span>four<span class="sc3"><span class="re1"></a<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><a</span> <span class="re0">href</span>=<span class="st0">"#five"</span><span class="re2">></span></span>five<span class="sc3"><span class="re1"></a<span class="re2">></span></span><span class="re1"></h1<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><div</span> <span class="re0">id</span>=<span class="st0">"content"</span> <span class="re0">style</span>=<span class="st0">"border: 1px solid red; padding: 0px; margin: 0px; background-color: grey; height: 89%; overflow: auto"</span><span class="re2">></span></span>
   <span class="sc3"><span class="re1"><h2</span> <span class="re0">id</span>=<span class="st0">"one"</span><span class="re2">></span></span>one<span class="sc3"><span class="re1"></h2<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
 
   <span class="sc3"><span class="re1"><h2</span> <span class="re0">id</span>=<span class="st0">"two"</span><span class="re2">></span></span>two<span class="sc3"><span class="re1"></h2<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
 
   <span class="sc3"><span class="re1"><h2</span> <span class="re0">id</span>=<span class="st0">"three"</span><span class="re2">></span></span>three<span class="sc3"><span class="re1"></h2<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
 
   <span class="sc3"><span class="re1"><h2</span> <span class="re0">id</span>=<span class="st0">"four"</span><span class="re2">></span></span>four<span class="sc3"><span class="re1"></h2<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
 
   <span class="sc3"><span class="re1"><h2</span> <span class="re0">id</span>=<span class="st0">"five"</span><span class="re2">></span></span>five<span class="sc3"><span class="re1"></h2<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>asdf<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"></div<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span>
<span class="sc3"><span class="re1"></html<span class="re2">></span></span></span>
 </pre></td></tr></tbody></table></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/224/rev-raw/21d122f3953de664e96f17bc406cb238d9cd67ae/phork0.htm" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/224#phork0.htm">phork0.htm</a>
</div>
</div>
</div>