使命名的锚点书签在单击时始终显示在屏幕顶部

我的标记如下：

<li><a href="#sheds_housing">Sheds &amp; Housing</a></li>
<div id="sheds_housing">
    <h1>sheds &amp; housing</h1>
    <img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds & Housing"
        title="Sheds & Housing" />
    <p>Text here</p>
</div>

创建指向页面某个部分的链接，以便当用户单击锚点时，会将他带到该部分。

无论如何，我是否可以确保当用户这样做时，内容始终显示在顶部，而没有任何可能出现在链接 div 上方文档的正常流程中的额外内容。

可以单独使用 CSS 来完成还是必须使用 JS/jQuery 来完成此操作，如果是，需要什么代码？

EDIT

之前我并不清楚；看到这个Fiddle。如果您单击前两个链接，您将被带到相应的部分，并且内容将显示在窗口顶部，但如果您单击最后一个链接，您将被带到相应的部分，但内容不会出现在窗口顶部和位于相应部分上方的内容都存在。

将 id“last_anchor”添加到列表中的最后一个链接，这将通过 jquery 实现。如何以及是否决定更改正文的边距取决于您......

$(document).ready(function(){
  $("#last_anchor").click(function(){
    var content_id = $(this).attr("href");
    var win_height = $(window).height();
    var content_height = $(content_id).height();
    var target_margin = win_height - content_height;
    $("body").css("margin-bottom", target_margin)
  });
});​