scroll to div - jquery - specific position

Question

I am trying this code:

  function goToByScroll(id){

        id = id.replace("link", "");

        $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
            'slow');
    }

    $("#sidebar > ul > li > a").click(function(e) {

        e.preventDefault();

        goToByScroll($(this).attr("id"));           
    });

The problem is that when i click in a specific element of list, the scroll go up to the top of the window. But in my case i have a fixed div in the top, so the content is hidden by this div. Well, I want stops the scroll before the div.

any idea?

demo

Solution 1

You need to give the top bar an id (e.g. id="header") and then subtract that from the scrollTop attribute:

$('html,body').animate({
    scrollTop: ($("#"+id).offset().top-$('#header').outerHeight(true))+'px'},
    'slow');

Here is a working example.

Solution 2

function goToByScroll(id){

        id = id.replace("link", "");

        $('html,body').animate({
            scrollTop: ($("#"+id).offset().top - $("#YOUR_FIXED_DIV").height() ) },
            'slow');
    }

    $("#sidebar > ul > li > a").click(function(e) {

        e.preventDefault();

        goToByScroll($(this).attr("id"));           
    });