Javascript jQuery平滑滚动多个链接到1个锚点_Javascript_Jquery_Hyperlink_Scroll_Anchor

Javascript jQuery平滑滚动多个链接到1个锚点

javascript jquery hyperlink scroll

Javascript jQuery平滑滚动多个链接到1个锚点,javascript,jquery,hyperlink,scroll,anchor,Javascript,Jquery,Hyperlink,Scroll,Anchor,我有一个动态创建的链接列表，所有链接都应该放在页面底部的一个锚点上。然后脚本打开第四个jQuery子选项卡。我的行为真的很奇怪，如果有人能帮我，我会很高兴的。这是代码 <html> <a id="editRPTab" href="#editpowerrp">Edit RP</a> <a id="editRPTab" href="#editpowerrp">Edit RP</a> <a id="editRPTab" href="#e

我有一个动态创建的链接列表，所有链接都应该放在页面底部的一个锚点上。然后脚本打开第四个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>


…很多这样的。。。
$（'#editRPTab'）。单击（函数（）{
$（document.body）。设置动画({
scrollTop:$（$（this.attr（'href'））.offset（）.top
}, 2000);
$（“#子选项卡”）.tabs（{active:4}）；
});

这就是它所做的

一旦页面加载，除了第一个链接外，没有其他链接可用

我第一次单击第一个按钮时，屏幕会闪烁，但我没有看到任何滚动或任何东西。该页保持在顶部

第二次单击第一个按钮时，它会按预期向下滚动到锚点（根据js代码）

然后，所有其他链接开始工作，但会立即将页面移动到锚定位置，而不会滚动。只有第一个链接向下滚动。您可以反复单击以使其滚动

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

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

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>

这对我很有用。你有几个问题

首先，如果您的元素是动态添加的，那么必须委派它们的事件处理程序，这样它就可以工作，而不必每次重新指定处理程序

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

试试看

谢谢你的主意，Robbie。您的代码不太有效，但我可以使用您的建议修改我的代码。现在看来效果不错

HTML

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

谢谢

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

$(function() {

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

        e.preventDefault();

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

    });

});

<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 });
});