jQuery平滑滚动，可链接到许多锚点

Question

我有一个动态创建的链接列表，所有链接都应转到页面底部的一个锚点。 然后，脚本打开第四个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中它不会滚动。 但是，在第二个单击第一个链接时，它会跳下，其他链接开始起作用。

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

Answer 1

HTML代码：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>


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

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

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

JS：

$(function() {

    $(document).on('click', '.editRPTab', function(e) {

        e.preventDefault();

         $("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 2000);

    });

});

这对我行得通。 您遇到了几个问题。

首先，如果您的元素是动态添加的，则必须委派它们的事件处理程序，以便其工作而不必每次都重新设置处理程序。

同样，唯一的ID只能分配给一个元素。 因此，我将锚标记更改为使用类。

试试看。

Answer 2

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

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>

JS

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

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

谢谢！

jQuery平滑滚动，可链接到许多锚点

问题描述

2 个解决方案

解决方案1
1 2014-07-28 02:29:18

解决方案2
0 已采纳 2014-07-28 19:30:40

jQuery平滑滚动，可链接到许多锚点

问题描述

2 个解决方案

解决方案1 1 2014-07-28 02:29:18

解决方案2 0 已采纳 2014-07-28 19:30:40

解决方案1
1 2014-07-28 02:29:18

解决方案2
0 已采纳 2014-07-28 19:30:40