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 设置中将“防止跨站点请求伪造”取消勾选
随机推荐
- OC面向对象的三大特性
一.面向对象的三大特性:封装(成员变量).继承和多态 1. set方法和get方法 1. set方法和get方法的使用场合 @public的成员可以被随意赋值,应该使用set方法和get方法来管理成员 ...
- nomad的简易集群
启动服务器 第一步是为服务器创建配置文件.无论是从下载的文件github,或粘贴到一个名为server.hcl: vim server.hcl # Increase log verbosity log ...
- python爬虫入门--beautifulsoup
1,beautifulsoup的中文文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 2, from bs4 import Be ...
- yum中$releasever、 $basearch等变量含义
[root@kickstart ~]# rpm -qf /etc/redhat-release centos-release--4.1708.el7.centos.x86_64 yum中的$relea ...
- 程序员的自我救赎---3.2：SSO及应用案例
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- JSON数据解析及gson.jar包
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送. 服务器端的编程语言只能以如下 3 种格式返回数据: HTML XML JSON JSON一种简单的数据格式,比xml更轻巧. JS ...
- SpringBoard 无法启动应用程序（错误：-3）
临时不知道错误的细节原因,重新启动模拟器就好了. 先记录下.
- 动态规划-迷宫-百度之星-Labyrinth
Labyrinth Problem Description 度度熊是一仅仅喜欢探险的熊.一次偶然落进了一个m*n矩阵的迷宫,该迷宫仅仅能从矩阵左上角第一个方格開始走,仅仅有走到右上角的第一个格子才算走 ...
- leetcode:程序猿面试技巧
起因 写在开头,脑袋铁定秀逗了,历时20多天,刷完了leetcode上面151道题目(当然非常多是google的),感觉自己对算法和数据结构算是入门了,但仍然还有非常多不清楚的地方,于是有了对于每道题 ...
- html页面高度自适应
本文实现的效果是依据浏览器分辨率的不同.页面底端背景色自适应浏览器高度,也就是能够自己主动填充背景色. <script type="text/javascript"> ...