Question

我正在使用一个较旧的脚本，该脚本使用jquery锚链接将页面设置为锚点动画。它工作得很好，但是我需要它来为特定div的内容设置动画，而不是整个页面。关于如何定位div而不是页面的任何想法？

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

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

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

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

Answer 1

您必须更改的唯一内容（如果我理解您的问题是正确的）是以下代码：

$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
            window.location.hash = elementClick
        });

并将其更改为

$("#yourDivToAnimateId").animate({ scrollTop: destination}, settings.speed, function() {
            window.location.hash = elementClick
        });

并且要设置动画的div必须将其ID设置为“yourDivToAnimateId”。有关jQuery选择器的更多信息，请单击here。

当前代码为整个页面设置动画的原因是，如果它们当前未设置动画，则会定位html和body标记。

您也可以使用

$("#yourDivToAnimateId:not(:animated)").animate(...)

防止在上一个动画运行时启动所选div的新动画。

我希望这会有所帮助。

Jquery链接到动画滚动div而不是整个页面

1 个答案: