jQuery平滑滚动，用于链接到1个锚点的许多链接

debugcn 发表于 Dev

用户名

我有一个动态创建的链接列表，所有链接都应转到页面底部的一个锚点。然后，脚本打开第四个jQuery子选项卡。我的行为确实很奇怪，如果有人可以帮助我，我会喜欢的。这是代码。

<html>
<a id="editRPTab" href="#editpowerrp">Edit RP</a>
<a id="editRPTab" href="#editpowerrp">Edit RP</a>
<a id="editRPTab" href="#editpowerrp">Edit RP</a>
...lots of these...

<a name="editpowerrp" id="editpowerrp" class="editpowerrp"></a> 
</html>

<script type="text/javascript">
$('#editRPTab').click(function(){
    $(document.body).animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 2000);
    $( "#subtabs" ).tabs({ active: 4 });
});
</script>

所以这就是它在做什么。

页面加载后，除第一个链接外，其他任何链接均不起作用。

第一次单击时，屏幕会闪烁，但没有任何滚动或其他任何显示。该页面位于顶部。

我第二次单击第一次，它会按您的期望向下滚动到锚点（每个js代码）。

然后，所有其他链接开始工作，但立即将页面移至锚点，并且不滚动。仅第一个链接向下滚动。您可以一次又一次单击以使其滚动。

我在Chrome和Firefox中都看到了类似的行为，尽管在Firefox中它不会滚动。但是，在第二个单击第一个链接时，它会跳下，其他链接开始起作用。

真奇怪我正在尽可能快地学习这些东西，但是这件事让我感到困惑。请让我知道发生了什么，如果您对如何解决此问题有任何建议。

用户名

感谢罗比的想法。您的代码工作不充分，但是我可以使用您的建议来修改我的代码。现在看来运作良好。

的HTML

<a class="editRPTab" href="#editpowerrp">Edit RP</a>
<a class="editRPTab" href="#editpowerrp">Edit RP</a>
<a class="editRPTab" href="#editpowerrp">Edit RP</a>

$('.editRPTab').click(function(){
    $(document.body).animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 2000);
    $( "#subtabs" ).tabs({ active: 4 });
});

看来关键是使用类选择器而不是id / name。因此，我在上将id更改为class，然后在js函数中将选择器更改为class而不是id。

谢谢！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。