Jump to location on page plus extra pixels

Question

I have this page with a following menu bar. This bar is X pixels high, so when I choose to jump to a #div , it jumps to that div, as if the menu wasn't there, creating the following situation:

But of course I want it to look like this:

The navbar is 90px high, so I'm wondering if it's possible to jump to a div plus a certain amount of pixels. If there is some other solution to my problem, it's of course also welcome.

Answer 1

HTML:

<a href="#">Scroll</a>
<div id="divscroll">Hello World</div>

CSS:

div#divscroll { margin-top: 5000px; }  

jQuery:

$("a").click(function (e) {
    e.preventDefault();
    $("html, body").animate({
        scrollTop: $("#divscroll").offset().top
    }, 1000 / 2);
});

FIDDLE DEMO

You can get the exact value from the top in jquery by: $("#divscroll").offset().top . Now of course you can add or delete from this value.