zeptoJS:如何像jQuery一样,让滚动变得优雅?
利用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一样,让滚动变得优雅?的更多相关文章
- jQuery全能图片滚动插件
插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery文字左右滚动
实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
随机推荐
- Android集成Mina NIO Socket
Mina简介 Apache MINA(Multipurpose Infrastructure 多功能框架 for Network Applications) 是 Apache 组织一个较新的项目,它为 ...
- 原生js-拉勾网首页效果
拉勾网首页公司广告位的悬浮划过效果着实很吸引我.如下(不会做动图!--,感兴趣的可以去拉勾看看): 此处最吸引我的地方在于将鼠标划过上面一排公司列表时,感觉像是绿色的区块跟着你的鼠标移动一样,颇有动感 ...
- MVC验证码的编写
主要是相互学习一下mvc,希望各位大神指导 /// <summary> /// 生成随机数字 /// </summary> /// <returns>随机数字< ...
- SQL从入门到基础 - 04 SQLServer基础2（数据删除、数据检索、数据汇总、数据排序、通配符过滤、空值处理、多值匹配）
一.数据删除 1. 删除表中全部数据:Delete from T_Person. 2. Delete 只是删除数据,表还在,和Drop Table(数据和表全部删除)不同. 3. Delete 也可以 ...
- iOS 天气应用代码中文介绍
天气应用 解释请求参数 q: 表示Location(可以给出城市名字;或者直接给城市的经纬度) 例子:q=beijing 例子 q=48.834,2.394 num_of_days: 需要预报的天数 ...
- mysql UNIX时间戳与日期的相互转换
UNIX时间戳转换为日期用函数: FROM_UNIXTIME() select FROM_UNIXTIME(1156219870); 日期转换为UNIX时间戳用函数: UNIX_TIMESTAMP() ...
- C++ template随笔
话题从重用开始说起: 最基本的重用,重用一个方法,被重用的逻辑被抽取封装成为方法,之后我们把方法当成一种工具来使用(处理数据,输入输出,或者改变状态). 来到了面向对象的时代,如果这个方法出现父类上面 ...
- part3
我就不刁旭概念什么的问题了哈~直接进入工作中所通用的一些有关object的方法和属性 1).for/in 属性的遍历~他遍历的对象没有特定的顺序,而且只能枚举出所有用户自定义的属性,不能枚举出某些预定 ...
- apache2.2 虚拟主机配置详解
一.修改httpd.conf 打开appserv的安装目录,找到httpd.conf文件,分别去掉下面两行文字前面的#号. #LoadModule vhost_alias_module modules ...
- css图片磨砂化
Css代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...