zepto不支援animate({scrollTop:"100px"})的解決辦法

標籤：

　　在移動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"})的解決辦法