jdjd ). The p...">

Fixed top panel with named anchors

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

The problem is that the target is placed at the top of the viewport (behind the fixed top panel).

how can i fix it so that the browser scrolls so that the target appears just below the top bar?

+7
source share
2 answers

Not sure why you are understated, this seems like an honest good question.

I would place margin-top in the viewport equal to the height of the fixed panel.

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

0
source

As far as I know, there is no pure purification. If you use the built-in scroll bar, this can be achieved, but this requires a fixed height.

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

In addition, you can easily use JQUERY to measure the height of the user, put it in a div container and scroll it.

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

Another solution could be to give the ur element a link to the top (if it is h1 or something else) :)

+3
source

All Articles