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

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

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 2

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

为 h3 和 a 添加 CSS 类

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

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

设置航向目标的位置为：

relative 或 absolute

然后当点击锚链接时，你设置目标的位置，它必须停止