jQuery中Animate与scrollTop滑动回顶部效果

时间：2014-06-24 编辑：简简单单来源：一聚教程网

jQuery animate() 方法允许您创建自定义的动画

animate是jq的一个特效的函数方法，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的，这样就可以创建动画效果。

使用jquery的Animate 方法可以实现页面上下滑动，以往常用的写法是：

代码如下	复制代码
$('html, body').animate({ scrollTop: '0px','fast', function(){ } });

前几天在写页面滑动插件的时候，需要在animate后执行回调。如下：

代码如下	复制代码
$('html, body').animate({ scrollTop: '0px','fast', function(){ //这里的代码执行了两次 $('body').trigger('scrollDone'); } });

于是发现，回调内执行了两次。之前一直都没注意到这个问题。

其原因主要是使用了$('html, body') 作为animate的dom，这样做的目的是为了兼容各浏览器。

webkit 内核的浏览器使用body 进行滑动，而其他浏览器则使用html进行滑动。

这里偷懒的使用了$('html, body')，虽然解决了兼容性问题，但是却导致animate回调两次的问题。因此该方案并不完美。

于是，可以做下判断，解决兼容性及回调问题：

代码如下	复制代码
$($.browser.webkit ? "body": "html").animate({ scrollTop: '0px','fast', function(){ $('body').trigger('scrollDone'); } });

在jquery 1.9版本后，已经不支持$.browser.webkit的方法进行浏览器类型检测了，需要的话，自己通过ua判断下即可。

结合scrollTop实用示例：

代码如下:

代码如下	复制代码
jQuery(document).ready(function($){ $('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); $('#comt').click(function(){ $('html,body').animate({scrollTop:$('#comments').offset().top}, 800); }); $('#xia').click(function(){ $('html,body').animate({scrollTop:$('#footer').offset().top}, 800); }); });

表示点击相关ID移动到指定位置：
点击ID为shang的元素，回到顶部；
点击ID为comt的元素，回到ID为comments的位置；
点击ID为xia的元素，回到底部；