Question

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

标题中有锚标记可以转到内容。问题是由于标题点击它没有滚动到正确的位置。即滚动到远处。

如何将垂直空间（填充）添加到该锚位置，以便正确显示？

我的代码

链接：

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

锚：

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

这里是一个小提琴手

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

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

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

3 个答案: