写移动端的时候,引入的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的动画解决方法的更多相关文章

  1. WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法

    WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...

  2. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  3. js小效果:返回顶部 scrollTop 。 滚屏:animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  4. a超链接之返回顶部的两种实现方法

    1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id&quo ...

  5. Hibernate通过SQL查询常量时只能返回第一个字符的解决方法

    在Hibernate中如果通过 [java] view plaincopy session.createSQLQuery("select '合计' as name from dual&quo ...

  6. WORD Application.Documents.Open函数返回null的一种解决方法

    DCOM Config Setting for "Microsoft Office Word 97 - 2003 Document" 内部配置一切正常,但调用Application ...

  7. PHP解码Json(json_decode)字符串返回NULL的原因及解决方法(转载)

    本文主要为大家讲解了php在使用json_decode函数解码json字符串时,解码不成功返回NULL的问题原因分析和解决方法,感兴趣的同学参考下. 一般来说,php对json字符串解码使用json_ ...

  8. .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)

    最近在项目中与别的公司对接业务,对方是Java语言,需要调用对方的WebServices,结果常规的添加web引用的方法可以传过去值,但是返回值为null 查了很多资料,没有解决方法 思考应该是.Ne ...

  9. Python requests 调Jenkins登录后的接口,返回403Fobidden的原因及解决方法。

    因Jenkins启用“防止跨站点请求伪造" 解决方法: 在Manage Jenkins->Configure Global Security 设置中将“防止跨站点请求伪造”取消勾选

随机推荐

  1. 迷宫问题-POJ 3984

    迷宫问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24348   Accepted: 14206 Descriptio ...

  2. Java项目之员工收录系统

    在Java SE中,对IO流与集合的操作在应用中比较重要.接下来,我以一个小型项目的形式,演示IO流.集合等知识点在实践中的运用. 该项目名称为"员工收录系统",在Eclipse的 ...

  3. C# 通过反射初探ORM框架的实现原理

    背景: 以前学的Java进行开发,多用到Mybatis,Hiberante等ORM框架,最近需要上手一个C#的项目,由于不是特别难,也不想再去学习C#的ORM框架,所以就想着用反射简单的实现一下ORM ...

  4. 关于C语言中static保留字的使用

             static存储类型可以用于全部变量,无需考虑变量声明的位置.但是作用于块外部和块内部时具有不同的作用.         (1)当作用于函数内部时,和每次程序离开所在块就会丢失值的自 ...

  5. Android 跨进程启动Activity黑屏(白屏)的三种解决方案

    原文链接:http://www.cnblogs.com/feidu/p/8057012.html 当Android跨进程启动Activity时,过程界面很黑屏(白屏)短暂时间(几百毫秒?).当然从桌面 ...

  6. Nginx软件部署配置过程

    ---恢复内容开始--- 注意:博主使用的系统为: [root@web01 ~]# uname -a Linux web01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar ...

  7. 使用java类破解MyEclipse

    今天在网上查资料的时候无意中发现使用java类破解MyEclipse的注册码问题.跟大家分享一下 1.建立JAVA Project,随便命名,只要符合规则就行 2.在刚刚建好的Project右击src ...

  8. JAVA通过Gearman实现MySQL到Redis的数据同步(异步复制)

    MySQL到Redis数据复制方案 无论MySQL还是Redis,自身都带有数据同步的机制,像比较常用的 MySQL的Master/Slave模式 ,就是由Slave端分析Master的binlog来 ...

  9. 《Pro Android Graphics》读书笔记之第六节

    Android UI Layouts: Graphics Design Using the ViewGroup Class Android ViewGroup Superclass: A Founda ...

  10. 解决Unable to find setter method for attribute: [commandName]

    最近学习springmvc的表单标签库,其中form标签主要用于渲染HTML表单,而form标签有很多属性,可供选择,其中一般来说(以前)最重要的是commandName属性,因为它定义了模型属性的名 ...