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：本菜鸟注册博客园已经有一段时间了，这还是第一次发博客记录自己的学习，希望大家请多指教~~）
zepto不支持animate({scrollTop:"100px"})的解决办法的更多相关文章
- IE6不支持min-heightt和min-width的解决办法
IE6不支持min-height的解决办法 最小高度min-height是很有用的,但IE6却不支持.真烦人.有没有办法呢? 我们可以利用IE6不识别!important来实现: height:aut ...
- PL/SQL不支持64位Oracle Client 解决办法
解决X64操作系统PL/SQL连接报错问题 make sure you have the 32 bits oracle client installed 说明PLSQL Developer并不支持Or ...
- Windows10下运行Android Studio3.3时关于AMD处理器不支持Intel硬件加速的解决办法
我的电脑是Thinkpad E485系列,CPU是AMD Ryzen 5 2500U,电脑预装系统是Windows10 X64家庭版,如下图所示: 下载安装了Android Studio3.3,创建了 ...
- 【转】ie8 不支持 position:fixed 的简单解决办法
今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...
- ie8 不支持 position:fixed 的简单解决办法
今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...
- zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...
- Chrome不支持本地Ajax请求，解决办法
Chrome不支持本地Ajax请求,当我在.html文件中访问.json文件时就会出现这个问题,就是说这个时候不能加载这个.html文件. 解决方式 打开Chrome快捷方式的属性中设置: 右击Chr ...
- 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服务器不支持PATH_INFO的问题及解决办法
最近在写一个小程序,然后里面自己写了个URL的处理器,比如说访问index.php/article 那么就会自动加载进来article页面,访问index.php/home就会自动加载home页面. ...
随机推荐
- JVM调优- jstat（转）
jstat的用法 用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指令基本上满足不了这样的需求,因为它主要监控的是总体的系统资源,很难定位到java应用程序. Jstat ...
- 为什么是kafka(二)
回答几个网友提出的问题,不清楚的能够看上一篇内容. 1. kafka的删除策略应该怎么配置?为了提升性能.我是不是应该1小时删除一次消费过的数据. 全然能够依据磁盘大小配置.仅仅要磁盘足够用,全然不 ...
- Git客户端搭建环境（Windows系统）的使用
本文环境: 操作系统:Windows XP SP3 Git客户端:TortoiseGit-1.8.8.0-32bit 一.安装Git客户端 全部安装均采用默认! 1. 安装支撑软件 msysgit: ...
- echart 图表自定义样式
initChart: function (id) { this.charts = echarts.init(document.getElementById(id)) this.charts.setOp ...
- [ArcGIS]Oracle RAC下创建地理数据库(Create Enterprise Geodatabase)失败的解决方法
转载请注明原文地址:http://www.cnblogs.com/litou/p/8028843.html 环境:Oracle 11g 11.2.0.1.0(双节点RAC群集),ArcGIS Desk ...
- lua面向对象封装
lua面向对象的一个封装,直接贴代码 --swfclass = {};local cs = {};function _class( child, base, ... )-- _.s( child ...
- win7 32位下载安装redis并安装php_redis扩展
redis打包文件下载地址:http://files.cnblogs.com/files/cuiwenyuan/Redis-3.2.100-Windows-32.zip php_redis.dll下载 ...
- Java语言实现简单FTP软件------>源码放送(十三)
Java语言实现简单FTP软件------>FTP协议分析(一) Java语言实现简单FTP软件------>FTP软件效果图预览之下载功能(二) Java语言实现简单FTP软件----- ...
- java基础入门1到100的奇数求和
/* Name:1-100所有奇数求和的程序 Power by Stuart Date:2015-4-23 */ public class DateTest01{ public static void ...
- C调用Lua中的函数解析table
Passing Tables to Lua Functions A use case that happens often is the passing of tables to and from L ...