javascript - 使命名的 anchor 书签在单击时始终显示在屏幕顶部

Question

我的标记如下:

<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>

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

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

它可以单独使用 CSS 完成还是我必须为此使用 JS/jQuery，如果是什么代码？

编辑

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

Answer 1

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

$(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)
  });
});​