zepto中的scrollTo
2016-06-25 14:04
267 查看
//zepto没有scrollTo动画,这里扩展了一个scrollTo函数 $.fn.scrollTo = function(options) { var defaults = { scrollTop: 0, //滚动目标位置 durTime: 500, //过渡动画时间 delay: 30, //定时器时间 callback: null //回调函数 }; var opts = $.extend(defaults, options), timer = null, _this = this, curTop = _this.scrollTop(), //滚动条当前的位置 subTop = opts.scrollTop - 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.scrollTop); }, opts.delay); return _this; }; //用法 $(".container").scrollTo({ scrollTop: curOffsetTop, durTime: 0 });
相关文章推荐
- ReactJS学习系列课程(React mixin的使用)
- Oracle硬解析,软解析,软软解析介绍
- 工作周记 - 第五周 (2016/06/20 - 2016/06/25)
- linux下tomcat运行war包常用命令
- [置顶] scala笔记
- 通过nginx配置文件抵御攻击
- 生成数据库字典
- iOS开发笔记--UIView中的坐标转换
- linux xfs文件系统无法用readdir获取dirent文件类型d_type则用stat获取暨stat函数讲解
- python使用pytesseract识别验证码的方法
- .NET基础拾遗(3)字符串、集合和流3
- AngularJS简单介绍
- Java设计模式——装饰者模式
- Guava Futures异步回调机制源码解析
- linux 经典命令汇集
- Qt 多线程必知必会
- Dreamweaver8.0本地站点的搭建与管理
- 解决centos联网问题
- hdu3293(字符串排序)
- h264中profile和level的含义