jquery to jump to page anchors - slightly off

[unwashed potato!]

i currently use jquery to smoothly jump page anchors, however there is a slight issue in that my header section with a height of approx 100px, which is fixed at the top of the page, lays over the top of where the page scrolls to, cover the top 100px.

below is the code I use

    $(".section_gallery a").click(function() {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $("#section_gallery").offset().top
        }, 400);
    });

i was hoping that offset() could have parameters to set is 100px lower, but it doesn't appear to work how i had hoped.

any suggestion as to how I can solve this?

many thanks

 

[unwashed potato!]

Arguably you could grab the header element height instead of using a fixed value.

that worked great.

 

[unwashed potato!]

figured it out thanks.

you've mixed classes ".section_gallery a" and ids "#section_gallery" ?

nope it's all correct