Question

I have a header on my website that is fixed and is say 100px high. As the page is scrolled the website’s content scroll underneath the header.

The problem is, if I now click on an anchor link at the top of the page it will jump to the intended section which will then be hidden underneath my fixed header.

Is there a way to have the anchor link work as normal but offset the vertical height of the fixed header so everything displays properly?

Thanks

Answer 1

Give each anchor a class:

<a name="location" class="bookmark">

Then in your CSS:

a.bookmark {
  display: block; 
  position: relative;
  top: -100px;
  margin-left: -5000em; 
}

Without seeing your page it’s difficult to work out if the above code would work perfectly, but in principle something like this should work.

However this can’t be used if your links link directly to eg tags rather than to named anchors.