Question

我有一个动态创建的链接列表，所有链接都应该转到页面底部的一个锚点。然后该脚本打开第4个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平滑滚动许多链接到1个锚点

2 个答案: