以下是解决此问题的JavaScript解决方案。将单击事件绑定到toplinks和by链接中的 <a> ，在单击事件上查找目标 <p> 偏移量，并使用javascript滚动到它。

$("#toplinks, #bottomlinks").on('click','a', function(event){ 
    event.preventDefault();
    var o =  $( $(this).attr("href") ).offset();   
    var sT = o.top - $("#fixedbar").outerHeight(true); // get the fixedbar height
    // compute the correct offset and scroll to it.
    window.scrollTo(0,sT);
});

小提琴： http://jsfiddle.net/AnmJY/1/

修改后的JS：

 $("#toplinks a").click(function() {
    var id =  $(this).attr('href');
     $('html, body').animate({         
         scrollTop: $(id).offset().top-40
     }, 1000);
 });

修改后的CSS：

body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:40px;
    width:100%
}

小提琴： http://jsfiddle.net/xSdKr/

40(px)是菜单高度，1000是执行动画的毫秒时间。

到目前为止，JS解决方案比纯CSS更优雅，主要是因为它保持了元素的位置，而没有任何可能干扰您的网站样式的人工填充。它还包括动画-人们通常发现平滑的过渡比使用纯CSS/HTML的insta-flips更容易接受，因为它们可以更容易地跟踪页面的内容和你所在的位置。缺点是，如果有人在网址中使用 #first -他将看到与标题重叠的菜单。

你可以稍微作弊一点。

http://jsfiddle.net/vyPkA/

body{padding:0;margin:0}
#toplinks{padding-top:2em; margin-bottom: -40px;}
#fixedbar{
    position:fixed;
    background-color:#ccc;