许多链接到 1 个锚点的 jQuery 平滑滚动答案

【问题标题】：jQuery Smooth Scrolling for Many Links to 1 anchor许多链接到 1 个锚点的 jQuery 平滑滚动
【发布时间】：2014-09-19 04:30:25
【问题描述】：

我有一个动态创建的链接列表，所有链接都应该指向页面底部的一个锚点。然后脚本打开第 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 中它不会滚动。但第二次点击第一个链接时，它会跳下来，其他链接开始工作。

这太奇怪了。我正在尽可能快地学习这些东西，但这东西让我大吃一惊。如果您对如何解决此问题有任何建议，请告诉我发生了什么。

【问题讨论】：

标签： javascript jquery hyperlink scroll anchor

【解决方案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 只能分配给一个元素。因此，我将锚标签改为使用类。

试试看。

【讨论】：

这段代码实际上是让页面停留在链接上，甚至不允许向下滚动，直到它完成 2000 时间。

【解决方案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>

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

似乎关键是使用类选择器而不是 id/name。于是我把id改成了class上的，然后把js函数中的selector改成了class而不是id。

谢谢！

【讨论】：