Question

I have these hyperlink which will jump to anchor tags in UL some where

<a href="#A">A</a>
<a href="#B">A</a>
<a href="#C">A</a>

<ul>
<li><a name="A"></a></li>
<li><a name="B"></a></li>
<li><a name="C"></a></li>
</ul>

This is to make sure I jump to the right alphabetical letter in the list (which is long and will have scroller). The problem I have is that this is clone when document ready (requirement of the website for different purpose – cannot change here). So after the clone there are 2 sets of anchor tags doing the same thing. I can change the ID of on the clone but not the inner . The result I want is that when click on A or B or C, it will make the jump in the new clone instead

How to solve this problem? If there is a way to avoid using these anchor tag, it is fine too. I think jQuery has a way to jump to specific selector, right? Let me know.

Thanks

Answer 1

The jQuery ScrollTo plugin could solve your problem.

jQuery.ScrollTo

Related: JQuery focus

Or you could add this script:

clone.find("a[href^=#]").each(function() {
    var anchor = $(this);
    var name = anchor.attr("href");
    anchor.attr("href", name + "_1");
    clone.find("a[name=" + name.substring(1) + "]").attr("name", name.substring(1) + "_1");
});