jQuery平滑滚动，可链接到许多锚点
[英]jQuery Smooth Scrolling for Many Links to 1 anchor
问题描述
I have a list of dynamically created links that all should go to one anchor at the bottom of the page. 
我有一个动态创建的链接列表，所有链接都应转到页面底部的一个锚点。 Then the script opens up the 4th jQuery subtab. 然后，脚本打开第四个jQuery子选项卡。 I have really strange behavior going on and would love it if someone could help me with it. 我的行为确实很奇怪，如果有人可以帮助我，我会喜欢的。 Here is the code. 这是代码。
<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>
So here is what it is doing. 所以这就是它在做什么。
As soon as the page is loaded, no links except the first one works. 页面加载后，除第一个链接外，其他链接均不起作用。
The first time I click the first the screen flashs but I do not get any scrolling or anything. 第一次单击第一次时，屏幕闪烁，但没有任何滚动或其他任何显示。 The page stays at the top. 该页面位于顶部。
The second time I click the first it scrolls down to the anchor as you would expect(per js code). 我第二次单击第一次，它按您的期望向下滚动到锚点（每个js代码）。
Then, all of the other links start working, but instantly move the page to the anchor and do not scroll. 然后，所有其他链接开始工作，但立即将页面移至锚点，并且不滚动。 Only the first link scrolls down. 仅第一个链接向下滚动。 Which you can click again and again, to get it to scroll. 您可以一次又一次单击以使其滚动。
I see similar behavior in both Chrome and Firefox, though in Firefox it doesn't scroll. 我在Chrome和Firefox中都看到了类似的行为，尽管在Firefox中它不会滚动。 But on the second click of the first link it jumps down and the other links begin to work. 但是，在第二个单击第一个链接时，它会跳下，其他链接开始起作用。
This is so odd. 真奇怪 I'm learning this stuff as fast as I can but this thing has me boggled. 我正在尽可能快地学习这些东西，但是这件事让我感到困惑。 Please let me know what's going on and if you have any suggestions on how to fix this issue. 请让我知道发生了什么，如果您对如何解决此问题有任何建议。
2 个解决方案
解决方案1
1 2014-07-28 02:29:18
HTML Code: 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: JS：
$(function() {
$(document).on('click', '.editRPTab', function(e) {
e.preventDefault();
$("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 2000);
});
});
That works for me. 这对我行得通。 You had a couple of issues. 您遇到了几个问题。
First of all, if your elements are being added dynamically, their event handler must be delegated so that it will work without having to rese the handler each time. 首先，如果您的元素是动态添加的，则必须委派它们的事件处理程序，以便其工作而不必每次都重新设置处理程序。
Also, an unique ID can only be assigned to one element. 同样，唯一的ID只能分配给一个元素。 Therefore, I changed the anchor tags to use a class instead. 因此，我将锚标记更改为使用类。
Try it out. 试试看。
解决方案2
0 已采纳 2014-07-28 19:30:40
Thanks for the ideas Robbie. 感谢罗比的想法。 You code did not quite work but I was able to use your suggestions to modify my code. 您的代码工作不充分，但是我可以使用您的建议来修改我的代码。 Now it seems to work well. 现在看来运作良好。
HTML 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 JS
$('.editRPTab').click(function(){
$(document.body).animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 2000);
$( "#subtabs" ).tabs({ active: 4 });
});
It seems the key was to use class selector instead of id/name. 看来关键是使用类选择器而不是id / name。 So I changed the id to class on the and then changed the selector in the js function to class instead of id. 因此，我将id更改为class，然后将js函数中的选择器更改为class而不是id。
Thanks! 谢谢！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.