2012-01-15 108 views
0

我正在使用使用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; 
     }) 
    }) 
} 
+0

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

回答

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的一个新的动画到以前的动画运行时启动。

我希望这会有所帮助。

+0

感谢您的回复。我无法使用上述解决方案使其工作。有没有一种方法只是使用jquery来动画div(overflow:scroll;)的内容到该div内的某个ID#? – user1150977 2012-01-16 14:16:39

+0

因此,如果我理解正确的话,你想要动画化每个嵌套在指定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