correct anchor scrolling with fixed header
Scrolling to a content element via #anchor links is often broken if you have a fixed header or menu.
You can fix this by disabling page scrolling and putting the whole content inside a <div> that has overflow: auto set, causing the div alone to get scroll bars. The div has to have a fixed height.
Update 2023-08: Setting scroll-margin-top on the id elements solves the problem without any other tags and css rules!
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 | <html> <head> <title>Scrolltest</title> </head> <body style="border: none; padding: 0px; margin: 0px;"> <h1 style="height: 10%; border: none; padding: 0px; margin: 0px;">Scrolltest <a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> <a href="#four">four</a> <a href="#five">five</a></h1> <div id="content" style="border: 1px solid red; padding: 0px; margin: 0px; background-color: grey; height: 89%; overflow: auto"> <h2 id="one">one</h2> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <h2 id="two">two</h2> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <h2 id="three">three</h2> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <h2 id="four">four</h2> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <h2 id="five">five</h2> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> </div> </body> </html> |
