scroll to position jquery offset animation

Question

i am using the following code to scroll down to my contact section at the bottom of the page which was working perfectly, until i added a fixed navigation at the top of the page to scroll down with the page. but unfortunatly the navigation takes up 100px of the page so it scrolls 100px past the point i want. i need to add the height of navigation to the .offset to view correct part of the page.

How do i add the height of the navigation bar too the code to scroll that height further down the page.

$("document").ready(function() {            

            $('#contact_cntrl').click(function(){

                $('html, body').animate({
                    scrollTop: $(".contact").offset().top
                }, 1000);                  


             });            

Solution

I believe what you want is to add the pixel offset to your scrollTop. Like this:

$('html, body').animate({scrollTop: $('.contact').offset().top + 100}, 1000);