jquery - 当标题元素使用固定位置时使用锚标签

Question

标题位置是固定的，高度为 100 像素。

标头中有指向内容的锚标记。问题是由于单击标题时它没有滚动到正确的位置。即它滚动到很远。

如何在该锚点位置添加垂直空间（填充）以使其正确显示？

我的代码

关联：

<li>
  <a href="#whoisresponsible">text</a>
</li>

锚：

<h3>
  <a name="whoisresponsible"></a>Q:&nbsp; Who is responsible for Lifeline’s Suburban Garage Sales?
</h3>

这是一个js小提琴

http://jsfiddle.net/lmeyer/XqLRg/3/

Answer 1

试试这个 http://jsfiddle.net/TDPP4/

将 CSS 类添加到 h3 和

<h3 class="Head3">
  <a class="InLink" name="whoisresponsible"></a>Q:&nbsp; Who is responsible for Lifeline’s   Suburban Garage Sales?
</h3>

然后添加这个 CSS

.Head3{
    position:relative;
    overflow:hidden;    
}
a.InLink{
     position:absolute;
     margin-top:-150px;
}

Answer 2

jQuery(document).ready(function() {

jQuery(".link").on("click", function(e) {

    e.preventDefault();

    var name= jQuery(this).attr("href");
    var n=name.split("#"); 

    var element = jQuery('[name="'+n[1]+'"]') 
    var container = jQuery("#mainContainer");


    var number = element.offset().top - container.offset().top + container.scrollTop() -190;
    jQuery(document).scrollTop(number);



});
});

Answer 3

我不确定我的回答是否正确，因为我真的不明白你的问题。

将航向目标的位置设置为：

relative或者absolute

然后当单击锚链接时，您设置必须停止的目标位置