Fixed topbar vs named anchors

Question

I have a topbar with position:fixed which also contains anchor links (<a href="#someid">jdjd</a>).

The problem is that the target is placed in the top of the viewport (behind the fixed topbar).

how can I fix so the the browser scrolls so that the target is shown just below the topbar?

Answer 1

Not sure why you're being downvoted, it seems like an honest a good question.

I'd put a margin-top on the viewport, equal to the height of the fixed topbar.

http://jsfiddle.net/justiceerolin/KfMLJ/ as an example

Answer 2

As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.

2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/

Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.

See: http://jsfiddle.net/jpGdu/

Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)