Question

过去几个小时我一直在处理一个奇怪的错误。在这一点上完全失去了理智。希望它是一个简单的东西，我只是俯瞰。希望有人可以提供帮助。

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

当我点击锚链接时，页面会向上滑动，但是无论我点击什么链接，它总是停在同一个链接上。我查了一下，所有的href都已正确关闭。我已经尝试将所有锚点和目标重命名为唯一的东西，以防万一有命名冲突，但它仍然做同样的事情。几乎停在第一个锚的位置。

这是我的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>

然后我的锚看起来像这样：

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

然后每个锚之间都有内容和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），当我点击每个锚链接时它返回了相同的数字。所以，我认为它错误地计算了这些div的页面上的位置。

但是，什么会导致这个脚本错误估计呢？

我尝过的其他事情：

从样式表中删除了所有媒体查询 - 没有帮助。
从样式表中删除了相当于css的部分和块（主要是与标题和本页相关的类） - 没有帮助。

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

Answer 1

解决了问题。

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

将一个类添加到锚点目标

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

锚类的CSS需要这个：

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

Answer 2

在我看来，您选择a[href*=#]:not([href=#])的选择器似乎是矛盾的。

你尝试过类似的事情：

$('#opt1, #opt2, #opt3, #opt4' ).click(function() { // your code. });

???

什么可能导致scrollTop出现故障？

2 个答案: