jQuery使用 Animate + scrollTop 实现页面滑动效果

使用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判断下即可

发表评论

电子邮件地址不会被公开。 必填项已用*标注