Offsetting an html anchor to adjust for fixed header?
- Give your anchor a class:
- You can then position the anchor with an offset higher or lower than where it actually appears on the page, by making it a block element by relatively positioning it. -250px will position the anchor upto 250px
- This is another solution using HTML code for offseting an html anchor:
- This doesn’t create any gap in the content and anchor links works.
CSS solution :
- In CSS, optionally you may want to add the following if the target is still off the screen:
- This is one of the solution:
- That will append a pseudo-element before every a-tag with an id. Adjust values to match the height of your header.
- For modern browsers, just add the CSS3 :target selector to the page. This will apply to all the anchors automatically.
- Adjust the height and the negative margin to the offset you need…
- You can include a smooth-scroll effect to the anchor, while making it stop at -60px above the anchor, fitting nicely underneath the fixed bootstrap navigation bar (requires jQuery):
- We added 40px-height .wiki element holding the anchor before each h1 elements.