//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
});

zepto中的scrollTo的更多相关文章

  1. zepto中的touch库与fastclick

    1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...

  2. 这些Zepto中实用的方法集

    前言 时间过得可真快,转眼间2017年已去大半有余,你就说吓不吓人,这一年你成长了多少,是否荒度了很多时光,亦或者天天向上,收获满满.今天主要写一些看Zepto基础模块时,比较实用的部分内部方法,在我 ...

  3. Android中的ScrollTo和ScrollBy解析

    关于Android中的ScrollBy和ScrollTo方法相信大家并不陌生,这两个方法是在View中实现的.所以在各个继承了View的类都可以使用改方法. 在View中对这两个方法的源码编写是这样的 ...

  4. zepto中的属性设置

    上次看zepto的init方法时,有一段属性设置的代码,先来看看其表现: if (isPlainObject(properties)) { nodes = $(dom) $.each(properti ...

  5. zepto中$.proxy()的到底有多强大?

    好吧,其实是标题党了,哈哈,只是想总结一下工作中遇到$.proxy()的用法而已. 一.语法: $.proxy()有两种使用语法 1)$.proxy(fn,context),fn是一个函数,conte ...

  6. 使用zepto中animate报错“Uncaught TypeError: this.bind is not a function”的解决办法

    在使用zepto时,我先引入zepto.min.js,然后引入fx.js,但是在使用animate函数时,控制台却报如下错误: Uncaught TypeError: this.bind is not ...

  7. 从zepto中学习方法

    前言,今天开始学习Zepto源码,这里仅仅几下里面能用到的方法..陆续补充ing... 一,判断类型函数 function type(obj) { return obj == null ? Strin ...

  8. 阻止长按复制页面中的内容;zepto中touch中的应用必须先加载event模块之后;

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. zepto中给不存在的元素设置样式并绑定事件的坑

    在移动端使用zepto选择器时,一般如果元素不存在会返回一个空的zepto对象. zepto在设置元素样式时,提供了两个入参方式,一种键值对方式$(".ter").css({&qu ...

随机推荐

  1. Java【第四篇】基本语法之--循环

    循环语句功能 在循环条件满足的情况下,反复执行特定代码 循环语句的四个组成部分 初始化部分(init_statement)循环条件部分(test_exp) 循环体部分(body_statement) ...

  2. python之路day02--格式化输出、初始编码、运算符

    格式化输出 格式化输出替换字符串.字符串中%占位符,,%%s就是代表百分号,不代表占位符s 字符串 stringd 数字 dight name = input('请输入你的名字:') age = in ...

  3. 让WinSCP和Putty一直保持连接

    转: 让WinSCP和Putty一直保持连接 2015年08月14日 01:08:19 zcczbq 阅读数:13173 标签: puttywinscp 更多 个人分类: Operation   版权 ...

  4. 微信小程序之动态添加、删除指定内容(view)和获取input值

    这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3 ...

  5. Mybatis的原理与JVM内存结构(面试题)

    Mybatis的原理 1.Mapper 接口在初始SQL SessionFactory注册的 2.Mapper 接口注册在名为MapperRegistry类的 HasMap中 key=Mapper c ...

  6. Python的虚拟环境

    Python自带env # 新建虚拟环境 python -m venv env_name # 激活虚拟环境 cd env_name cd Scripts activate # 退出虚拟环境 # 到达虚 ...

  7. ruby 对象转换哈希(Hash)

    通过 ActiveRecord 从数据库的某张数据表(table)中获取的对象如何转换成为 Hash orders_table 是一张订单信息表,对应的 model 为 Orders @order = ...

  8. 第二节:深入剖析Thread的五大方法、数据槽、内存栅栏。

    一. Thread及其五大方法 Thread是.Net最早的多线程处理方式,它出现在.Net1.0时代,虽然现在已逐渐被微软所抛弃,微软强烈推荐使用Task(后面章节介绍),但从多线程完整性的角度上来 ...

  9. 跨站请求伪造 | ajax

    一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功 ...

  10. vue-cli3.X 打包后上传服务器刷新报 404的问题

    vue-cli3.X 默认配置 比2.X体验好很多,比如路由 如图,本地正常,传到服务器,因为二级目录,刷新就404,或 502等,找不到文件 nginx解决: location /{ error_p ...