jQuery使用Animate和scrollTop实现页面滑动效果 - Web前端

现在在页面中使用动画效果来提高用户体验，已经很常用了，最近弄了一个项目也运用了不少的动画效果，拿其中一个来说下吧。使用JQuery使用Animate和scrollTop实现页面滑动效果，以往常用的写法是：

1. $('html, body').animate({     

2.   scrollTop: '0px','fast', function(){   

3.   }         

4.  });     

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

1. $('HTML, body').animate({    

2.    scrollTop:'0px','fast', function(){   

3.    //这里的代码执行了两次     

4.    $('body').trigger('scrollDone'); }      

5. });   

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

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

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

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

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

1. $($.browser.webkit ? "body": "html").animate({    

2.    scrollTop: '0px','fast', function(){       

3.    $('body').trigger('scrollDone');        

4.   }         

5. });       

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