在移動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(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方，效果還不錯~~哈哈
調用方式為 :$("body").scrollTo( {toT : 0} ); 這就是最簡單的回到頂部
具體demo如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試</title> <style> body{background: red;height: 3000px;text-align: center;} #clickToBack{position: fixed;left: 0;bottom: 0;width: 100%;height: 40px;line-height: 40px; background: white;} </style> </head> <body> <h1>我是頭頂</h1> <div id="clickToBack"> go back </div> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ></script> <script> $.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; }; </script> <script> //調用 $("#clickToBack").click(function() { $("body").scrollTo({ toT: 0 }); })</script> </body> </html>
（PS：本菜鳥注冊博客園已經有一段時間了，這還是第一次發博客記錄自己的學習，希望大家請多指教~~）