标签：
在移动web项目的开发中，遇到一个通过点击页面自动到相应的楼层处的需求，最初的想法就是使用html的target属性进行切换，但实际效果十分死板，显得毫无交互性。该前端架构采用zepto这个轻库进行开发，它具有类似jQuery的语法，之后采用了animate({scrollTop:"100px"})这个函数进行页面的动画滚动，结果就是毫无效果。
通过查询zepto fx包的源码
transform = prefix + ‘transform‘ cssReset[transitionProperty = prefix + ‘transition-property‘] = cssReset[transitionDuration = prefix + ‘transition-duration‘] = cssReset[transitionDelay = prefix + ‘transition-delay‘] = cssReset[transitionTiming = prefix + ‘transition-timing-function‘] = cssReset[animationName = prefix + ‘animation-name‘] = cssReset[animationDuration = prefix + ‘animation-duration‘] = cssReset[animationDelay = prefix + ‘animation-delay‘] = cssReset[animationTiming = prefix + ‘animation-timing-function‘] = ‘‘
发现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(!publicFun.isNull(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;
};
采用原型函数的方式，制做一个scrollTo方，效果还不错~~哈哈
（PS：本菜鸟注册博客园已经有一段时间了，这还是第一次发博客记录自己的学习，希望大家请多指教~~）
zepto不支持animate({scrollTop:"100px"})的解决办法
标签：
原文地址：http://www.cnblogs.com/skyHF/p/4720308.html
