//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. 去掉 Chrome(V66) 新标签页的8个缩略图

    1.Chrome程序资源文件路径: C:\Program Files (x86)\Google\Chrome\Application\66.0.3359.181\resources.pak 2.下载C ...

  2. GitBook插件整理 - book.json配置

    目录 1. 配置概况 1.1. 全局配置 1.2. 插件列表 plugins 1.3. 插件属性配置pluginsConfig 2. 一些实用插件 2.1. back-to-top-button 回到 ...

  3. 2017-12-19python全栈9期第四天第二节之列表的增删查改之按切片删除

    #!/user/bin/python# -*- coding:utf-8 -*-li = ['zs','ls','ww','zl','xx']# del li[1:] #1到最后# print(li) ...

  4. 【.net】未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序解决办法

    #错误描述: 在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报错: “未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序” # ...

  5. Hadoop记录-退役

    一.datanode添加新节点 1.在dfs.include文件中包含新节点名称,该文件在名称节点的本地目录下 [白名单] [/app/hadoop/etc/hadoop/dfs.include] 2 ...

  6. Hadoop记录-metastore jmx配置

    参考:http://www.lixiuliang.cn/categories/%E5%A4%A7%E6%95%B0%E6%8D%AE/ 1.修改bin/hive文件 添加jvm启动参数: if [ $ ...

  7. [物理学与PDEs]第2章第1节 理想流体力学方程组 1.3 理想流体力学方程组的数学结构

    1.  局部音速 $c$: $c^2=\cfrac{\p p}{\p \rho}>0$. 2.  将理想流体力学方程组 $$\beex \bea \rho\cfrac{\p {\bf u}}{\ ...

  8. Vue Material

    Material Design是什么? https://www.zhihu.com/topic/20005114/top-answers 我们挑战自我,为用户创造了崭新的视觉设计语言.与此同时,新的设 ...

  9. sqlmap基础入门超详细教程

    前言: 总算进入了自己喜欢的行业. 要时刻记得当初自己说过的话, 不忘初心. Come on! 资料: 感谢超哥分享的干货..  sqlmap干货点击直达 学习环境: 本次学习使用的是kali集成的s ...

  10. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...