//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. 【转】 如何重写hashCode()和equals()方法

    转自:http://blog.csdn.net/neosmith/article/details/17068365 hashCode()和equals()方法可以说是Java完全面向对象的一大特色.它 ...

  2. 走进Java中的持有对象(容器类)之一 容器分类

    Java容器可以说是增强程序员编程能力的基本工具,本系列将带您深入理解容器类. 容器的用途 如果对象的数量与生命周期都是固定的,自然我们也就不需要很复杂的数据结构. 我们可以通过创建引用来持有对象,如 ...

  3. pta编译总结1

    打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号: ...

  4. Codeforces Round #553 (Div. 2)

    传送门 A. Maxim and Biology 题意: 给出一个串s,问最少需要多少步操作使得串s包含"ACTG"这个子串,输出最少操作次数: 题解: 枚举每个位置 i,求出将 ...

  5. MYSQL 企业常用架构与调优经验分享

    一.选择Percona Server.MariaDB还是MYSQL  mysql应用源码:http://www.jinhusns.com/Products/Download/?type=xcj 1.M ...

  6. Python动态语言的特性

    一.动态语言相关概念 1.1 动态语言 在运行时代码可以根据某些条件改变自身结构 可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化 常见的动态语言:Object-C.C# ...

  7. EF CodeFirst系列(6)---配置1对1,1对多,多对多关系

    这一节介绍EF CodeFirst模式中的1对0/1,1对多,多对多关系的配置,只有梳理清楚实体间的关系,才能进行愉快的开发,因此这节虽然很简单但是还是记录了一下. 1. 1对0/1关系配置 1. 通 ...

  8. .net Core 下数据库访问

    SqlSugar :是一款高性能(达到ADO.NET最高性能水平)SqlSugar :是除EF外拉姆达解析最完善的ORM,多表 .UnionALL. 交叉子查询.真实的批量操作和分页SqlSugar ...

  9. MessageFormat的用法,java动态替换String字符串中的占位符

    import java.text.MessageFormat; import java.util.GregorianCalendar; import java.util.Locale; public ...

  10. Coroutine的原理以及实现

    最近在写WinForm,在UI界面需要用到异步的操作,比如加载数据的同时刷系进度条,WinForm提供了不少多线程的操作, 但是多线程里,无法直接修改主线程里添加的UI的get/set属性访问器(可以 ...