核心提示:发现zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以没有生效。接下来的方法就是自己写一个滚动条上下滚动的方法。初步的代码如下:$.fn....
发现zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以没有生效。接下来的方法就是自己写一个滚动条上下滚动的方法。初步的代码如下: $.fn.scrollTo =function(options){ var defaults = { toT : 0, //滚动目标位置 durTime : 500, //过渡动画时间 delay : 30, //定时器时间 callback:null //回调函数 }; var opts = $.extend(defaults,options), timer = null, _this = this, curTop = _this.scrollTop(),//滚动条当前的位置 subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 index = 0, dur = Math.round(opts.durTime / opts.delay), smoothScroll = function(t){ index++; var per = Math.round(subTop/dur); if(index >= dur){ _this.scrollTop(t); window.clearInterval(timer); if(opts.callback && typeof opts.callback == 'function'){ opts.callback(); } return; }else{ _this.scrollTop(curTop + index*per); } }; timer = window.setInterval(function(){ smoothScroll(opts.toT); }, opts.delay); return _this; }; 调用: $("body").scrollTo({toT:500});