写移动端的时候，引入的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. 最强离线安装MySQL_8.0.2方法

    最强离线安装MySQL_8.0.2方法,一次就能安装成功. 按照此方式,离线安装MySQL五分钟都花不到,节省了大量的宝贵时间. 前戏,假设你已经从MySQL官网中获取了下面这个压缩包: 解压之后变成 ...

  2. Python函数中如何定义参数

    一.位置参数:根据函数定义时的参数位置传递参数#形参和实参的个数必须一致def fun1(): print("运行结果") print("this is fun1(),n ...

  3. 【jQuery插件】使用cropper实现简单的头像裁剪并上传

    插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...

  4. zoj 3195 Design the city LCA Tarjan

    题目链接 : ZOJ Problem Set - 3195 题目大意: 求三点之间的最短距离 思路: 有了两点之间的最短距离求法,不难得出: 对于三个点我们两两之间求最短距离 得到 d1 d2 d3 ...

  5. CCF-201409-2-画图

    问题描述 试题编号: 201409-2 试题名称: 画图 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩 ...

  6. PHP的AES加密类

    PHP的AES加密类 aes.php <?php /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...

  7. UWP 使用OneDrive云存储2.x api（一）【全网首发】

    最近开发人脸识别UWP[微识别 / Werecognition]用到了OneDrive开发,下面把来龙去脉讲一下. 下载地址 https://www.microsoft.com/store/produ ...

  8. java 类加载机制总结

    Java程序的运行,离不开class的加载,所谓类加载就是将编译好的class文件加载的jvm并形成class对象,只有class正确加载才能被实例化和调用. public class test { ...

  9. JavaWeb学习总结(一)——JavaWeb开发入门(转)

    转载自 http://www.cnblogs.com/xdp-gacl/p/3729033.html 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示In ...

  10. hdu 5635 LCP Array（BC第一题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5635 LCP Array Time Limit: 4000/2000 MS (Java/Others) ...