jQuery Smooth Scrolling for Many Links to 1 anchor
Question
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. 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).
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. 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 answers
solution1
1 2014-07-28 02:29:18
HTML Code:
<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);
});
});
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. Therefore, I changed the anchor tags to use a class instead.
Try it out.
solution2
0 ACCPTED 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
<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 });
});
It seems the key was to use class selector instead of 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.
Thanks!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.