Smooth Scrolling with Sticky Menu

now this is my problem, this is a one page website with stickymenu (#main-menu). The #main-menu is fixed on that position. The first image shows what should the page looks when i click on the "About" link on menu, the page will scroll smoothly on #about.

But here on Image Two, is what does my site is rendering, when i click on "About" Link, the About Us title scrolls till the top and hid on the #main-menu.

Here is my JS code:

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.prevent开发者_JAVA技巧Default();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

How do i make it stop up until the #main-menu bottom only? Thanks a million in advance!

---

you want to subtract your header's height from the offsetTop.

$('html').animate({ // $(document.documentElement) works too
  scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight(), 0)
}, 800, 'easeInOutCirc');

add the Math.max( ... , 0) to avoid scrolling to a negative offset when your link destination is at the very top.