Question

我有一些jQuery，我想帮助优化。

该脚本工作正常但是，如果我有多个div想要使用该脚本，那么他们会感到困惑。

这是jQuery

 jQuery(document).ready(function() {
        jQuery(".anchorLink").anchorAnimate()
    });

    jQuery.fn.anchorAnimate = function(settings) {
        settings = jQuery.extend({
            speed : 400
        }, settings);   

        return this.each(function(){
            var caller = this
            jQuery(caller).click(function (event) { 
                event.preventDefault()
                var locationHref = window.location.href
                var elementClick = jQuery(caller).attr("href")

                var destination = jQuery(elementClick).offset().top;
                jQuery("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                    window.location.hash = elementClick
                });
                return false;
            })
        })
    }

以下是典型的html代码：

<div id="container1">
<ul class="Questions">
<li class="anchorLink" href="#myAnchor">
<a class="faq-topic-link anchorLink" href="#myAnchor">
<span class="topic_ questionTitle">FAQ Question</span>
</a>
</li>
</ul>


<ul class="aAnswers">
<li class="li_answers">
<a name="myAnchor" id="myAnchor"></a>
<span class="topic-head" id="topics_">FAQ Question</span>
Lorim Ipsum ...
<div class="back-to-top">
<a href="#faqtop" class="anchorLink">Back To Top</a></div>
<div class="clear"></div>
</li>
</ul>
</div>

当我尝试在页面上的其他地方使用上面的html代码时，问题出现了......就像这样：

<div id="container2">
    <ul class="Questions">
    <li class="anchorLink" href="#myAnchor">
    <a class="faq-topic-link anchorLink" href="#myAnchor">
    <span class="topic_ questionTitle">FAQ Question</span>
    </a>
    </li>
    </ul>


    <ul class="aAnswers">
    <li class="li_answers">
    <a name="myAnchor" id="myAnchor"></a>
    <span class="topic-head" id="topics_">FAQ Question</span>
    Lorim Ipsum ...
    <div class="back-to-top">
    <a href="#faqtop" class="anchorLink">Back To Top</a></div>
    <div class="clear"></div>
    </li>
    </ul>
    </div>

我认为我通过使用“this”正确地进行了操作，因此脚本会设置为“this”容器设置动画。

Answer 1

从查看你的html看起来可能是导致你出问题的代码。通常href标记中的<a></a>属性用于导航到唯一ID。现在，html元素上的id属性应该是唯一的。应该注意，锚标签不必导航到另一个锚。他们可以导航到任何唯一id'd元素。虽然如果有两个具有相同id的元素，那么导航将转到DOM中的第一个匹配id。

从给定的html中，两个锚标签具有相同的id。如果你使那些id独特，那么我认为你会看到你想要的结果。也许是这样的：

<a name="myAnchor" id="myAnchor" href="#navigateFromFirstAnchor">Go to First Div</a>
<div id="navigateFromFirstAnchor"></div>

<a name="mySecondAnchor" id="mySecondAnchor" href="#navigateFromSecondAnchor">Go To Second Div</a>
<div id="navigateFromSecondAnchor"></div>

请参阅id属性here和锚标记here的文档。

优化的jQuery

1 个答案: