写移动端的时候，引入的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. 2733:判断闰年-poj

    2733:判断闰年 总时间限制:  1000ms 内存限制:  65536kB 描述 判断某年是否是闰年. 输入 输入只有一行,包含一个整数a(0 < a < 3000) 输出 一行,如果 ...

  2. 崩溃 golang入坑系列

    早上(11.30)收到邮件,Vultr东京机房网络故障.当时搭建SS时,考虑到了机房故障.所以特意分出了日本和香港两条线路.但千算万算,忘记数据库还在东京机房中. 现在网络故障,SS服务器无法读取数据 ...

  3. IntelliJ IDEA（二） ：面板介绍

    一.面板说明 IDEA面板的全貌如下图 二.菜单栏 下面会简单介绍下一些常用的部分菜单使用,如有疑问或补充欢迎留言. (1).File文件 1. New:新建一个工程 可以新建project,导入已存 ...

  4. Android Studio问题汇总

    1) Android Studio重命名工程名称: 1. 关闭Android Studio 2. 修改project所在路径的文件夹名字为[NewName] 3. 修改根目录下的.iml文件名为[Ne ...

  5. Redis各个数据类型的使用场景

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). Redis列表命令 参考:http://www.r ...

  6. PHP实现的进度条效果详解

      <?php //防止执行超时 set_time_limit(0); //清空并关闭输出缓存 ob_end_clean(); //需要循环的数据 for($i = 0; $i < 188 ...

  7. 如何用九条命令在一分钟内检查Linux服务器性能？

    一.uptime命令 这个命令可以快速查看机器的负载情况.在Linux系统中,这些数据表示等待CPU资源的进程和阻塞在不可中断IO进程(进程状态为D)的数量.这些数据可以让我们对系统资源使用有一个宏观 ...

  8. Google 视频编码格式 VP9 究竟厉害在哪里

    近期 Google 已经开始研究 VP10 了,VP10 是一个由 WebM 和 Motroska 包含的开放.免费视频编解码器.Google 也已利用 VP10 来处理 YouTube 4K 视频. ...

  9. SQL Server学习之路（六）：“增删改查”之“查”

    0.目录 1.前言 2.最基本的SQL查询语句 3.select...from... 3.1 "*"与"Top num *" 3.2 查询指定列 3.3 Isn ...

  10. OpenCV 读取视频 多种方式

    OpenCV中常见的视频方式是while循环读取,可是,当遇到嵌套循环呢 1.常见的while循环 ,没有嵌套循环 cv::VideoCapture capture("d:/test/dem ...