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(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：本菜鸟注册博客园已经有一段时间了，这还是第一次发博客记录自己的学习，希望大家请多指教~~）

转载于:https://www.cnblogs.com/skyHF/p/4720308.html

zepto不支持animate({scrollTop:100px})的解决办法相关推荐

Nginx服务器不支持PATH_INFO的问题及解决办法
Nginx服务器不支持PATH_INFO的问题及解决办法参考文章: (1)Nginx服务器不支持PATH_INFO的问题及解决办法 (2)https://www.cnblogs.com/echoso ...
HD声卡开启麦克风调控补丁 | HD系列声卡不支持立体声混音的解决办法
1.Realtek HD Audio声卡开趔克风调控补丁 1)解决Realtek ALC 861/883/885声卡音量控制的录音部分无法调节音量问题 2)解决Realtek ALC 861/883/ ...
桌面支持--电脑出现临时账户--解决办法
电脑出现临时账户--解决办法 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList 登录用户配置文件变 ...
ie8 不支持 position:fixed 的简单解决办法
今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...
蚁剑ASP连SQLSERVER执行xp_cmdshell爆驱动程序不支持所需的属性解决办法
使用ASP连接SQLSERVER sa执行xp_cmdshell爆"-2147217887:ODBC 驱动程序不支持所需的属性错误". 原因是在source\core\asp\te ...
Chrome浏览器不支持字体小于12px的解决办法
谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,具体效果见下图.有些特殊情况下我们需要字体小点,特别是在制作英文网站的时候,怎么办?既然有问题,我们就有解决问题的方法. < ...
AjaxPro2 方法未定义,对象不支持此方法或属性,解决办法
如果报错类未定义,或者是命名空间未定义, 首先看看AjaxPro页面注册,要在page_load里面注册 namespace AdoNetDemo { public partial class Add ...
Unity3d使用高通Vuforia发布IOS工程不支持64位的一些解决办法
1.将Unit升级至4.6.x或5.0.x,将Vuforia差距升级到最新版本(vuforia-unity-mobile-android-ios-4-0-105 ) 2.平台Other Setting ...
nginx不支持pathinfo的原因以及解决办法
nginx.cn nginx下支持PATH_INFO详解 – 运维与架构 mood 要想让nginx支持PATH_INFO,首先需要知道什么是pathinfo,为什么要用pathinfo? pathi ...

zepto不支持animate({scrollTop:100px})的解决办法

zepto不支持animate({scrollTop:100px})的解决办法相关推荐

最新文章

热门文章