Question

I try to load specific location in same page. But the problem is, the header is fixed on position top, When I click the links, the header go behind of the header. So I am not able to show some contents. Please visit this Fiddle. You can understand what I am try to say.
I dont like to add padding and margin.

Answer 1

You might want to change your HTML. There can be only one id per page.

In the given fiddle, you have a repeating <div id="one">

Now, to get the scroll working, you could do something like this :

$(document).ready(function(){
    $("a").click(function(e) {
        e.preventDefault();
        var hash = $(this).attr("href");
        //console.log($(hash).position().top);
        $('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);

    });
});

Here $(hash).position().top gets the position of the div on the page and I subtract 50 from it (the height of the fixed div).

Here is a fiddle
​