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

  1. $(function() {
  2.     $('#top').click(
  3.         function (e) {
  4.             $('html, body').animate({scrollTop: '0px'}, 1000);
  5.             return false;
  6.         }
  7.     );
  8. });

　　

在线示例：利用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

  1. /* Author:
  2.     Max Degterev @suprMax
  3. */
  4.  
  5. ;(function($) {
  6.   var DEFAULTS = {
  7.     endY: $.os.android ? 1 : 0,
  8.     duration: 200,
  9.     updateRate: 15
  10.   };
  11.  
  12.   var interpolate = function (source, target, shift) {
  13.     return (source + (target - source) * shift);
  14.   };
  15.  
  16.   var easing = function (pos) {
  17.     return (-Math.cos(pos * Math.PI) / 2) + .5;
  18.   };
  19.  
  20.   var scroll = function(settings) {
  21.     var options = $.extend({}, DEFAULTS, settings);
  22.  
  23.     if (options.duration === 0) {
  24.       window.scrollTo(0, options.endY);
  25.       if (typeof options.callback === 'function') options.callback();
  26.       return;
  27.     }
  28.  
  29.     var startY = window.pageYOffset,
  30.         startT = Date.now(),
  31.         finishT = startT + options.duration;
  32.  
  33.     var animate = function() {
  34.       var now = Date.now(),
  35.           shift = (now > finishT) ? 1 : (now - startT) / options.duration;
  36.  
  37.       window.scrollTo(0, interpolate(startY, options.endY, easing(shift)));
  38.  
  39.       if (now < finishT) {
  40.         setTimeout(animate, options.updateRate);
  41.       }
  42.       else {
  43.         if (typeof options.callback === 'function') options.callback();
  44.       }
  45.     };
  46.  
  47.     animate();
  48.   };
  49.  
  50.   var scrollNode = function(settings) {
  51.     var options = $.extend({}, DEFAULTS, settings);
  52.  
  53.     if (options.duration === 0) {
  54.       this.scrollTop = options.endY;
  55.       if (typeof options.callback === 'function') options.callback();
  56.       return;
  57.     }
  58.  
  59.     var startY = this.scrollTop,
  60.         startT = Date.now(),
  61.         finishT = startT + options.duration,
  62.         _this = this;
  63.  
  64.     var animate = function() {
  65.       var now = Date.now(),
  66.           shift = (now > finishT) ? 1 : (now - startT) / options.duration;
  67.  
  68.       _this.scrollTop = interpolate(startY, options.endY, easing(shift));
  69.  
  70.       if (now < finishT) {
  71.         setTimeout(animate, options.updateRate);
  72.       }
  73.       else {
  74.         if (typeof options.callback === 'function') options.callback();
  75.       }
  76.     };
  77.  
  78.     animate();
  79.   };
  80.  
  81.   $.scrollTo = scroll;
  82.  
  83.   $.fn.scrollTo = function() {
  84.     if (this.length) {
  85.       var args = arguments;
  86.       this.forEach(function(elem, index) {
  87.         scrollNode.apply(elem, args);
  88.       });
  89.     }
  90.   };
  91. }(Zepto));

　　

DEMO:

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.  
  7.     <title>ZeptoScroll</title>
  8.     <style type="text/css">
  9.  
  10.     #main{
  11.         font: normal 13px/1.4em Helvetica, Arial, sans-serif;
  12.         width: 96%;
  13.         padding: 2%;
  14.         max-width: 320px;
  15.         margin: 0 auto;
  16.         background-color: #f5f5f5;
  17.         color:#666;
  18.     }
  19.  
  20.     #top {
  21.       display: inline-block;
  22.       padding: 6px 0;
  23.       color: #fff;
  24.       width: 100%;
  25.       cursor: pointer;
  26.       text-align: center;
  27.       border-radius: 3px;
  28.       background-color: #00bb9c;
  29.       text-decoration: none;
  30.     }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div id="main">
  35. 	<h1>Add some gold.</h1>
  36. 	<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>
  37.  
  38. 	<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>
  39.  
  40. 	<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>
  41.  
  42. 	<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>
  43.         <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>
  44.  
  45.         <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>
  46.  
  47.         <a id="top" href="javascript:void(0);">To the top, please!</a>
  48.     </div>
  49.  
  50.     <script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script>
  51.     <script src="static/zepto.scroll.js"></script>
  52.     <script type="text/javascript">
  53.     $('#top').on('click', function(e) {
  54.       $.scrollTo({
  55.         endY: 0,
  56.         duration: 200,
  57.         callback: function() {
  58.           alert('at the top');
  59.         }
  60.       });
  61.     });
  62.     </script>
  63. </body>
  64. </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 & WP 无限滚动插件

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

  6. jQuery图片无缝滚动JS代码ul/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" ...

  8. jQuery图片无缝滚动

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

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

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

随机推荐

  1. JavaScript 浮点数运算 精度问题

    JavaScript小数在做四则运算时,精度会丢失,这会在项目中引起诸多不便,先请看下面脚本. //加减 <script type="text/javascript" lan ...

  2. 基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

    (function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...

  3. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  4. 第一个androidAPP项目总结—ListView的上拉和下拉

    1.下拉刷新 需继承implements SwipeRefreshLayout.OnRefreshListener @Overridepublic void onRefresh() { new Wea ...

  5. SQL函数：用于将小写的数值翻译成大写的字符串

    --功能:  用于将小写的数值翻译成大写的字符串(支持到分,即小数点后两位)       --入口参数:@decNum------数字型变量    --返回:字符串    --举例:select db ...

  6. ExtJS实例1

    1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本 窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒 主页面: <!DOCTYPE ...

  7. Java中如何判断当前环境是大端字节顺序还是小端字节顺序

    Java非字节类型的基本类型,除了布尔型都是由组合在一起的几个字节组成的.这些数据类 型及其大小总结在表 2-1 中. 表:基本数据类型及其大小 数据类型 大小(以字节表示) Byte 1 Char ...

  8. tkinter之文件对话框

    from tkinter import * from tkinter.filedialog import * filetype = [('Python Files', '*.py *.pyw'), ( ...

  9. 不用修改nginx的高并发合并回源架构

    nginx的连接都是一对一的,想改成一对多,比较麻烦,所以曾经看完了Nginx代码想改成一对多,我还是没改成,后来改变了一下思路想到一个更简单的方案,而且不失并发性能,还容易控制,下面先给出下面的图: ...

  10. jquery mobile 复选框和单选框

    checkbox 和radio <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...