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

问题描述：

我正在使用使用jquery锚链接将页面动画化为锚点的较旧脚本。它效果很好，但我需要它只是动画制作特定div的内容，而不是整个页面。有关如何定位div而不是页面的想法？jquery链接到动画滚动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; 
     }) 
    }) 
}

就像一般性评论一样，依靠Javascript的自动分号插入通常是一个糟糕的主意，这是通常被认为是坏事的语言的“特征”，如果你不是小心。明确行结束将有助于防止错误。如果你真的不喜欢行结尾，也许可以尝试使用CoffeeScript，而替代语法不需要行结尾，但它生成的JS将是有效的，并且在正确的位置有行结束。 – GregL 2012-01-15 23:51:18

答

你必须改变（如果我的理解对不对你的问题）是下面的代码的唯一的事：

$("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（overflow：scroll;）的内容到该div内的某个ID＃？ – user1150977 2012-01-16 14:16:39

因此，如果我理解正确的话，你想要动画化每个嵌套在指定div中的元素，从div的第一个子元素开始，并使用指定的id完成元素？如果是这样，你在该div中寻找的id是它的直接子，你可以使用[children（）]（http://api.jquery.com/children/）和[：lt（）]（http：/ /api.jquery.com/lt-selector/）函数。您可以编辑您的问题以包含js将要处理的实际HTML，以进一步阐明您的需求 – 2012-01-17 21:22:24

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

相关推荐