写移动端的时候，引入的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. redis复制原理和应用

    1.前言 说到分布式高可用,必然少不了复制,一来是为了做个冗余备份防止数据丢失,二来还可以达到分流来提高性能的目的.基本架构: 下面用M表示Master(主服务器),S表示Slave(从服务器),话不 ...

  2. Android智能下拉刷新加载框架—看这些就够了

    一些值得学习的几个下拉刷新上拉加载开源库 Android智能下拉刷新框架-SmartRefreshLayout 支持所有的 View(AbsListView.RecyclerView.WebView. ...

  3. 大数据学习系列之一 ----- Hadoop环境搭建(单机)

    一.环境选择 1,服务器选择 阿里云服务器:入门型(按量付费) 操作系统:linux CentOS 6.8 Cpu:1核 内存:1G 硬盘:40G ip:39.108.77.250 2,配置选择 JD ...

  4. 一个简单的 js 时间对象创建

    JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date();          //创建一个时间对象 myDate.g ...

  5. flask_login 整合 pyjwt + json 简易flask框架

    现在很多框架都实现前后端分离,主要为了适应以下几个目的: 1,前后端的分离,可以使前端开发和后端开发更加分工明确,而不是后端还需要在视图模板中加入很多{% XXXX %}标签 2,是为了适应跨域调用或 ...

  6. BFS+数据处理 Under the Trees UVa

    题意:将多叉树转化为括号表示法,每个非叶结点的正下方都有一个'|'然后下方是一排'-'和字符,恰好覆盖所有子结点的正上方,单独的一行'#'为数据的结束标志 解题思路:用gets将字符数组输入,本题不用 ...

  7. Java数据结构和算法（十）——二叉树

    接下来我们将会介绍另外一种数据结构——树.二叉树是树这种数据结构的一员,后面我们还会介绍红黑树,2-3-4树等数据结构.那么为什么要使用树?它有什么优点? 前面我们介绍数组的数据结构,我们知道对于有序 ...

  8. 关于xshell:Connection closed by foreign host

    因为原来系统网有时掉,有时卡(同局域网别人没事),重新做了系统. 装了xmanager3,在用xshell连接linux服务器时,提示:服务器发送了一个无效的密钥,然后输出:Connection cl ...

  9. memcached subList序列化问题

    某个业务场景需要将list超过10个元素时截取前10个然后再丢memcached缓存,因此写了这么一行代码 if(list.size()>10){ list=list.subList(0, 10 ...

  10. 19_Android中图片处理原理篇，关于人脸识别站点，图片载入到内存，图片缩放，图片翻转倒置，网上撕衣服游戏案例编写

    1载入图片到内存 (1).数码相机照片特别是大于3m以上的,内存吃不消,会报OutOfMemoryError,若是想仅仅显示原图片的1/8,能够通过BitmapFactory.Options来实现.详 ...