When an anchor link is clicked, how would I add on a pixel value to the coordinates so the target is viewable underneath my fixed header.

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 section's bookmark a class eg

<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.

Answer 2

Frames!

You've designed a page with frames. If you hate html frames enough to code it all in CSS instead, why don't you hate the actual frames design?

I know I'll be downvoted for this, but I suggest you either use frames or change the design. My vote would be to change the design - fixed headers are annoying, particularly for a users with lower res screens, whose browser probably can't fathom all the CSS and jquery either.