javascript - 什么会导致 scrollTop 出现故障？

Question

过去几个小时我一直在处理一个奇怪的错误。完全失去了对这个的想法。希望这是我忽略的简单事情。希望有人能帮忙。

页面的部分复杂性在于我使用的是带有固定 header 的 Twitter Bootstrap，我试图在页面上使用 anchor 链接以及链接到这个相当长的页面中的某些内容。实际上，在我今天完成对网站的一些移动优化之前，我已经完成了这项工作，然后突然间我的 anchor 链接停止工作了。

发生的事情是，当我单击 anchor 链接时，页面向上滑动，但无论我单击哪个链接，它总是停在同一个链接上。我检查了一下，我所有的 href 都已正确关闭。我已经尝试将所有 anchor 和目标重命名为独特的东西，以防出现命名冲突，但它仍然做同样的事情。几乎停在第一个 anchor 的地方。

这是我的 HTML:

<div class="row subnav-module">
 <div class="col-md-12 col-xs-12">
    <div class="col-md-3 col-xs-3"><a href="#opt1" class="blue-bubble-btn">option 1</a></div>
    <div class="col-md-3 col-xs-3"><a href="#opt2" class="blue-bubble-btn">option 2</a></div>
    <div class="col-md-3 col-xs-3"><a href="#opt3" class="blue-bubble-btn">option 3</a></div>
    <div class="col-md-3 col-xs-3"><a href="#opt4" class="blue-bubble-btn">option 4</a></div>
 </div>
</div>

然后我的 anchor 看起来像这样:

<a name="opt1"></a>

然后在每个 anchor 之间有内容和 div。

这是我正在使用的 javascript:

jQuery('.subnav-module a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

  // grab the anchor link name, the hash
  var href = jQuery.attr(this, 'href');
  var target = jQuery(this.hash);

  target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    jQuery('html,body').animate({
      scrollTop: target.offset().top - 150 //offsets for fixed header
    }, 1000, function () { window.location.hash = href; });
    return false;
   }
 }
});

我在该行之后尝试了一个 console.log(scrollTop)，当我单击每个 anchor 链接时它返回了相同的数字。所以，我认为这是错误计算了这些 div 在页面上的位置。

但是，什么会导致此脚本计算错误呢？

我尝试过的其他事情:

• 从样式表中删除了所有媒体查询 - 没有帮助。
• 从样式表中删除了相当多的部分和 css block (主要是与标题和此页面相关的类)- 没有帮助。

有没有人对我可以尝试的其他事情有任何建议？

Answer 1

问题已解决。

如果其他人遇到同样的问题，这里是解决方案。

为 anchor 目标添加一个类

<a class="anchors" name="someanchor"></a>

anchor 类的 CSS 需要这个:

a.anchors, a.anchors:link { display:block; clear:both;  }