Javascript 什么会导致scrollTop出现故障?
在过去的几个小时里,我一直在处理一个奇怪的bug。在这件事上我完全失去了理智。希望这是我忽略的简单的事情。希望有人能帮忙 页面复杂性的一部分是我在使用带有固定标题的Twitter引导,我试图在页面上使用锚链接,以及链接到这个相当长的页面中的某些内容。事实上,在我今天完成网站的一些移动优化之前,我的锚链接就开始工作了,然后突然我的锚链接停止了工作 当我点击锚定链接时,页面会向上滑动,但无论我点击哪个链接,它总是停在同一个链接上。我检查过了,所有的href都已正确关闭。我尝试过将所有的锚和目标重命名为一些独特的名称,以防出现命名冲突,但它仍然做同样的事情。几乎在第一个锚的位置停止 这是我的HTML:Javascript 什么会导致scrollTop出现故障?,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,在过去的几个小时里,我一直在处理一个奇怪的bug。在这件事上我完全失去了理智。希望这是我忽略的简单的事情。希望有人能帮忙 页面复杂性的一部分是我在使用带有固定标题的Twitter引导,我试图在页面上使用锚链接,以及链接到这个相当长的页面中的某些内容。事实上,在我今天完成网站的一些移动优化之前,我的锚链接就开始工作了,然后突然我的锚链接停止了工作 当我点击锚定链接时,页面会向上滑动,但无论我点击哪个链接,它总是停在同一个链接上。我检查过了,所有的href都已正确关闭。我尝试过将所有的锚和目标重命名
<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>
我在那一行之后尝试了一个console.log(scrollTop),当我单击每个锚链接时,它返回了相同的数字。因此,我认为这是对这些div页面上的位置的错误计算
但是,是什么导致这个脚本计算错误呢
我尝试过的其他事情:
- 从样式表中删除所有媒体查询-没有帮助
- 从样式表中删除了css的部分和块(主要是与标题和此页面相关的类)——没有帮助
<a class="anchors" name="someanchor"></a>
在我看来,您选择的选择器
a[href*=#]:not([href=#])
似乎相互矛盾
你试过类似这样的东西吗:$('#opt1,#opt2,#opt3,#opt4')。单击(函数(){
//你的密码。
});代码>
??是否检查了Javascript错误?是的。没有javascript错误。而且,页面实际上是向上滑动的。它只是没有击中正确的目标(你是否启动了调试器并逐行检查每一行以确保它确实试图转到正确的链接?是的,我这样做了。但是伙计们,你们不会相信的。浏览器认为目标在同一个位置。我检查了它们上的元素,发现它一直显示在页面顶部。因此,我添加了一个类添加到这些链接,并添加display:block;clear:both;-问题已解决!aaarrrgh!在另一个浏览器中尝试它,看看是否有帮助。这不是问题。我正确地定位了链接。当我单击锚链接时,它会向上滑动-因此定位链接不是问题。感谢您的回复,但我现在已经修复了它。
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;
}
}
});
<a class="anchors" name="someanchor"></a>
a.anchors, a.anchors:link { display:block; clear:both; }