Edit in JSFiddle

$(document).ready(function () {
    $('.inpageLink').click(function(){
  var target = $(this).attr("href"),
      offsetTop = $(target).offset().top-20;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();        
    })
}); 

<div class="box" style="background-color:#295;">
<div>
<a href="#!">Top!</a>
<a href="#foo" class="inpageLink">Foo!</a>
<a href="#bar" class="inpageLink">Bar!</a>
</div>    
    <span id="top">top</span>
    <h3>Target Location</h3>
</div>
        
<div class="box" style="background-color:#173;">
<div>    
<a href="#top" class="inpageLink">Top!</a>    
<a  href="#!">Foo!</a>
<a href="#bar" class="inpageLink">Bar!</a>    
</div>    
    <span id="foo">foo</span>
    <h3>Target Location</h3>
</div>

<div class="box" style="background-color:#555;">
<div>
<a href="#top" class="inpageLink">Top!</a>    
<a href="#foo" class="inpageLink">Foo!</a>
<a  href="#!">Bar!</a>    
</div>    
    <span id="bar">bar</span>
    <h3>Target Location</h3>
</div>

html, body {
  overflow: hidden;
}
.box{height:500px;}