zeptoJS:如何像jQuery一样,让滚动变得优雅?

时间：2022-09-14 16:13:12

利用jQuery的animate() 方法，我们很容易实现滚动条的平滑滚动效果：

$(function() {

    $('#top').click(

        function (e) {

            $('html, body').animate({scrollTop: '0px'}, 1000);

            return false;

        }

    );

});

　　

在线示例：利用jQuery实现的返回顶部

最近在做基于zeptoJS手机网页开发，遇到类似需求，实践之后发现zeptoJS并不像Jquery一样支持scrollTop()方法，

所以，即使引入使zeptoJS支持The animate()方法的 fx.js 之后,依然无法实现平滑滚动效果。

GOOGLE了一下发现，原来并不是我一人遇到这种问题，Stack Overflow早已有大量相关讨论：

以上讨论给出了很多解决方案，目前我采用了下面这种：

 ZeptoScroll  插件

 GitHub地址：https://github.com/suprMax/ZeptoScroll

 官网地址：http://max.degterev.me/blog/zepto-scrolling

 zepto.scroll.js

/* Author:

    Max Degterev @suprMax

*/

;(function($) {

  var DEFAULTS = {

    endY: $.os.android ? 1 : 0,

    duration: 200,

    updateRate: 15

  };

  var interpolate = function (source, target, shift) {

    return (source + (target - source) * shift);

  };

  var easing = function (pos) {

    return (-Math.cos(pos * Math.PI) / 2) + .5;

  };

  var scroll = function(settings) {

    var options = $.extend({}, DEFAULTS, settings);

    if (options.duration === 0) {

      window.scrollTo(0, options.endY);

      if (typeof options.callback === 'function') options.callback();

      return;

    }

    var startY = window.pageYOffset,

        startT = Date.now(),

        finishT = startT + options.duration;

    var animate = function() {

      var now = Date.now(),

          shift = (now > finishT) ? 1 : (now - startT) / options.duration;

      window.scrollTo(0, interpolate(startY, options.endY, easing(shift)));

      if (now < finishT) {

        setTimeout(animate, options.updateRate);

      }

      else {

        if (typeof options.callback === 'function') options.callback();

      }

    };

    animate();

  };

  var scrollNode = function(settings) {

    var options = $.extend({}, DEFAULTS, settings);

    if (options.duration === 0) {

      this.scrollTop = options.endY;

      if (typeof options.callback === 'function') options.callback();

      return;

    }

    var startY = this.scrollTop,

        startT = Date.now(),

        finishT = startT + options.duration,

        _this = this;

    var animate = function() {

      var now = Date.now(),

          shift = (now > finishT) ? 1 : (now - startT) / options.duration;

      _this.scrollTop = interpolate(startY, options.endY, easing(shift));

      if (now < finishT) {

        setTimeout(animate, options.updateRate);

      }

      else {

        if (typeof options.callback === 'function') options.callback();

      }

    };

    animate();

  };

  $.scrollTo = scroll;

  $.fn.scrollTo = function() {

    if (this.length) {

      var args = arguments;

      this.forEach(function(elem, index) {

        scrollNode.apply(elem, args);

      });

    }

  };

}(Zepto));

　　

DEMO:

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>ZeptoScroll</title>

    <style type="text/css">

    #main{

        font: normal 13px/1.4em Helvetica, Arial, sans-serif;

        width: 96%;

        padding: 2%;

        max-width: 320px;

        margin: 0 auto;

        background-color: #f5f5f5;

        color:#666;

    }

    #top {

      display: inline-block;

      padding: 6px 0;

      color: #fff;

      width: 100%;

      cursor: pointer;

      text-align: center;

      border-radius: 3px;

      background-color: #00bb9c;

      text-decoration: none;

    }

    </style>

</head>

<body>

    <div id="main">

	<h1>Add some gold.</h1>

	<p>Look what I'm dealing with, man. I'm dealing with fools and trolls. I'm dealing with soft targets, and it's just strafing runs in my underwear before my first cup of coffee … they lay down with their ugly wives and their ugly children and just look at their loser lives and then they look at me and say, 'I can't process it.' Well, no, and you never will! Stop trying! Just sit back and enjoy the show.</p>

	<p>I am on a drug. It's called Charlie Sheen. It's not available. If you try it once, you will die. Your face will melt off and your children will weep over your exploded body.</p>

	<p>It's being directed and written by a genius named David Ward who, I don't know, won the Academy Award at 23 for writing The Sting? 
It was his pen and his vision that created the classic that we know today as Major League. In fact,
 a lot of people think the movie's called Wild Thing, as they should. Whatever … If they want me in it, it's a smash. If they don't, it's a turd that opens on a tugboat.</p>

	<p>I tried marriage. I'm 0 for 3 with the marriage thing. So, being a ballplayer — I believe in numbers. I'm not going 0 for 4. I'm not wearing a golden sombrero.</p>

        <p>Look what I'm dealing with, man. I'm dealing with fools and trolls.
 I'm dealing with soft targets, and it's just strafing runs in my underwear before my first cup of coffee … 
they lay down with their ugly wives and their ugly children and just look at their loser lives and then they look at me and say, 'I can't process it.' Well, no, and you never will! Stop trying! Just sit back and enjoy the show.</p>

        <p>I am on a drug. It's called Charlie Sheen. It's not available. If you try it once, you will die. Your face will melt off and your children will weep over your exploded body.</p>

        <a id="top" href="javascript:void(0);">To the top, please!</a>

    </div>

    <script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script>

    <script src="static/zepto.scroll.js"></script>

    <script type="text/javascript">

    $('#top').on('click', function(e) {

      $.scrollTo({

        endY: 0,

        duration: 200,

        callback: function() {

          alert('at the top');

        }

      });

    });

    </script>

</body>

</html>

　　

zeptoJS:如何像jQuery一样,让滚动变得优雅?的更多相关文章

  1. jQuery全能图片滚动插件

    插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...

  2. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  3. 【jQuery】scroll 滚动到顶部

    Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...

  4. jQuery BreakingNews 间歇滚动

    BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...

  5. Infinite Scroll - jQuery &amp&semi; WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. jQuery图片无缝滚动JS代码ul&sol;li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText&quot ...

  8. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery&period;hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

随机推荐

  1. 使用Kibana 分析Nginx 日志并在 Dashboard上展示

    一.Kibana之Visualize 功能 在首页上Visualize 标签页用来设计可视化图形.你可以保存之前在discovery中的搜索来进行画图,然后保存该visualize,或者加载合并到 d ...

  2. XML命名空间详解

    http://happylongnv.blog.hexun.com/48859954_d.html 目的:解决同一个元素在相同文件中代表不同含义的问题.因为XML文档中使用的元素不是固定的,那么两个不 ...

  3. 小米域名过渡JS

    <script>jQuery(function($) { (function() { var $bnBar = $(''), $topBn = $('#J_topBn'), $topBnB ...

  4. 正则表达式 之 C&num;后台应用

    正则表达式在.Net就是用字符串表示,这个字符串格式比较特殊,无论多么特殊,在C#语言看来都是普通的字符串,具体什么含义由Regex类内部进行语法分析. Regex 类 存在于 System.Text ...

  5. 安装完QQ必须要删除掉的几个恐怖文件

    安装完QQ必须要删除掉的几个恐怖文件 感谢 QQ很可怕 的投递 很多关注自己电脑硬件温度的朋友,一般都懂得去查看什么进程占用CPU较高,可能发现过有这么几个进程的CPU占用会有时莫名其妙的非常之高,它 ...

  6. sharepoint 自定义字段实现省市联动

    最后实现效果如下:设置栏如下:解决方案结构如下: fldtypes_RoyCustomField.xml 内容如下: <?xml version="1.0" encoding ...

  7. Linux-ubuntu安装过程讲解

    前言也不准备介绍Linux是什么,为什么要安装ubuntu?相信你能够看到这篇文章也知道自己想要做什么. 一,准备工具 1.VMwareWorkstation虚拟机 下载地址:https://my.v ...

  8. 4&period;1ASP&period;NET Core请求过程「深入浅出ASP&period;NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. HTTP请求过程 这里展示整体的HTTP请求的过程,这里化繁为简,保留了主干流程: 从浏览器输入域名开始,这里忽略 ...

  9. 转：VIM选择文本块&sol;复制&sol;粘贴

    VIM选择文本块/复制/粘贴 - lcj_cjfykx的专栏 - CSDN博客https://blog.csdn.net/lcj_cjfykx/article/details/9091569

  10. 【c&num;】6&period;0与7&period;0新特性介绍记录

    c#发展史 引用地址:https://www.cnblogs.com/ShaYeBlog/p/3661424.html 6.0新特性 1.字符串拼接优化 语法格式:$”string {参数}” 解释: ...

相关文章