zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果。这里我使用的是setInterval的方法。代码详情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>goTop</title>
<script src="zepto.min.js" type="text/javascript" ></script>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.goTop{
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
background: pink;
}
.hello{
width: 600px;
height: 2000px;
background: yellow;
}
</style>
</head>
<body>
<div class="goTop">返回顶部</div>
<div class="hello"></div>
</body>
<script type="text/javascript"> $(function(){ $('.goTop').click(function(){ //获取当前scrollTop的位置
var curScroll = $(document.body).scrollTop(); //上升的位移
var speed = 5; if(curScroll>0){
setInterval(timer,1);
} console.log(curScroll); function timer(){ if(curScroll>0){ curScroll = curScroll-speed;
$(document.body).scrollTop(curScroll);
console.log(curScroll); if(curScroll<=0){ $(document.body).scrollTop(0);
clearInterval(timer);
console.log("清除计时器") }
} } }) })
</script>
</html>
zepto的返回顶部scrollTop的动画解决方法的更多相关文章
- WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法
WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...
- a超链接之返回顶部的两种实现方法
1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id&quo ...
- Hibernate通过SQL查询常量时只能返回第一个字符的解决方法
在Hibernate中如果通过 [java] view plaincopy session.createSQLQuery("select '合计' as name from dual&quo ...
- WORD Application.Documents.Open函数返回null的一种解决方法
DCOM Config Setting for "Microsoft Office Word 97 - 2003 Document" 内部配置一切正常,但调用Application ...
- PHP解码Json(json_decode)字符串返回NULL的原因及解决方法(转载)
本文主要为大家讲解了php在使用json_decode函数解码json字符串时,解码不成功返回NULL的问题原因分析和解决方法,感兴趣的同学参考下. 一般来说,php对json字符串解码使用json_ ...
- .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
最近在项目中与别的公司对接业务,对方是Java语言,需要调用对方的WebServices,结果常规的添加web引用的方法可以传过去值,但是返回值为null 查了很多资料,没有解决方法 思考应该是.Ne ...
- Python requests 调Jenkins登录后的接口,返回403Fobidden的原因及解决方法。
因Jenkins启用“防止跨站点请求伪造" 解决方法: 在Manage Jenkins->Configure Global Security 设置中将“防止跨站点请求伪造”取消勾选
随机推荐
- 迷宫问题-POJ 3984
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 24348 Accepted: 14206 Descriptio ...
- Java项目之员工收录系统
在Java SE中,对IO流与集合的操作在应用中比较重要.接下来,我以一个小型项目的形式,演示IO流.集合等知识点在实践中的运用. 该项目名称为"员工收录系统",在Eclipse的 ...
- C# 通过反射初探ORM框架的实现原理
背景: 以前学的Java进行开发,多用到Mybatis,Hiberante等ORM框架,最近需要上手一个C#的项目,由于不是特别难,也不想再去学习C#的ORM框架,所以就想着用反射简单的实现一下ORM ...
- 关于C语言中static保留字的使用
static存储类型可以用于全部变量,无需考虑变量声明的位置.但是作用于块外部和块内部时具有不同的作用. (1)当作用于函数内部时,和每次程序离开所在块就会丢失值的自 ...
- Android 跨进程启动Activity黑屏(白屏)的三种解决方案
原文链接:http://www.cnblogs.com/feidu/p/8057012.html 当Android跨进程启动Activity时,过程界面很黑屏(白屏)短暂时间(几百毫秒?).当然从桌面 ...
- Nginx软件部署配置过程
---恢复内容开始--- 注意:博主使用的系统为: [root@web01 ~]# uname -a Linux web01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar ...
- 使用java类破解MyEclipse
今天在网上查资料的时候无意中发现使用java类破解MyEclipse的注册码问题.跟大家分享一下 1.建立JAVA Project,随便命名,只要符合规则就行 2.在刚刚建好的Project右击src ...
- JAVA通过Gearman实现MySQL到Redis的数据同步(异步复制)
MySQL到Redis数据复制方案 无论MySQL还是Redis,自身都带有数据同步的机制,像比较常用的 MySQL的Master/Slave模式 ,就是由Slave端分析Master的binlog来 ...
- 《Pro Android Graphics》读书笔记之第六节
Android UI Layouts: Graphics Design Using the ViewGroup Class Android ViewGroup Superclass: A Founda ...
- 解决Unable to find setter method for attribute: [commandName]
最近学习springmvc的表单标签库,其中form标签主要用于渲染HTML表单,而form标签有很多属性,可供选择,其中一般来说(以前)最重要的是commandName属性,因为它定义了模型属性的名 ...