zepto不支持animate({scrollTop:100px})的解决办法
在移動(dòng)web項(xiàng)目的開發(fā)中，遇到一個(gè)通過點(diǎn)擊頁面自動(dòng)到相應(yīng)的樓層處的需求，最初的想法就是使用html的target屬性進(jìn)行切換，但實(shí)際效果十分死板，顯得毫無交互性。該前端架構(gòu)采用zepto這個(gè)輕庫進(jìn)行開發(fā)，它具有類似jQuery的語法，之后采用了animate({scrollTop:"100px"})這個(gè)函數(shù)進(jìn)行頁面的動(dòng)畫滾動(dòng)，結(jié)果就是毫無效果。
通過查詢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'] = ''發(fā)現(xiàn)zepto的animate()源碼采用css3的方式進(jìn)行，而scrollTop屬性不在css3的動(dòng)畫屬性中，所以沒有生效。接下來的方法就是自己寫一個(gè)滾動(dòng)條上下滾動(dòng)的方法。初步的代碼如下：
$.fn.scrollTo =function(options){var defaults = {toT : 0, //滾動(dòng)目標(biāo)位置durTime : 500, //過渡動(dòng)畫時(shí)間delay : 30, //定時(shí)器時(shí)間callback:null //回調(diào)函數(shù)};var opts = $.extend(defaults,options),timer = null,_this = this,curTop = _this.scrollTop(),//滾動(dòng)條當(dāng)前的位置subTop = opts.toT - curTop, //滾動(dòng)條目標(biāo)位置和當(dāng)前位置的差值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;};采用原型函數(shù)的方式，制做一個(gè)scrollTo方，效果還不錯(cuò)~~哈哈
?
調(diào)用方式為 :$("body").scrollTo( {toT : 0} ); 這就是最簡(jiǎn)單的回到頂部
具體demo如下
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>測(cè)試</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, //滾動(dòng)目標(biāo)位置 durTime : 500, //過渡動(dòng)畫時(shí)間 delay : 30, //定時(shí)器時(shí)間 callback:null //回調(diào)函數(shù) };var opts = $.extend(defaults,options),timer = null,_this = this,curTop = _this.scrollTop(),//滾動(dòng)條當(dāng)前的位置 subTop = opts.toT - curTop, //滾動(dòng)條目標(biāo)位置和當(dāng)前位置的差值 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>//調(diào)用 $("#clickToBack").click(function() {$("body").scrollTo({toT: 0});})</script></body> </html>?
?
?
（PS：本菜鳥注冊(cè)博客園已經(jīng)有一段時(shí)間了，這還是第一次發(fā)博客記錄自己的學(xué)習(xí)，希望大家請(qǐng)多指教~~）
轉(zhuǎn)載于:https://www.cnblogs.com/skyHF/p/4720308.html
總結(jié)
以上是生活随笔為你收集整理的zepto不支持animate({scrollTop:100px})的解决办法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三大趋势在移动互联网发展
- 下一篇： 部署不能产生class文件的问题