写移动端的时候，引入的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. Go基础之--位操作中你所不知道的用法

    之前一直忽略的就是所有语言中关于位操作,觉得用处并不多,可能用到也非常简单的用法,但是其实一直忽略的是它们的用处还是非常大的,下面先回顾一下位操作符的基础 位操作符 与操作:&1 & ...

  2. python 抓取金融数据，pandas进行数据分析并可视化系列 (一)

    终于盼来了不是前言部分的前言,相当于杂谈,算得上闲扯,我觉得很多东西都是在闲扯中感悟的,比如需求这东西,一个人只有跟自己沟通好了,总结出某些东西了,才能更好的和别人去聊,去说. 今天这篇写的是明白需求 ...

  3. 项目实战6—Mysql实现企业级日志管理、备份与恢复实战

    Mysql实现企业级日志管理.备份与恢复实战 环境背景:随着业务的发展,公司业务和规模不断扩大,网站积累了大量的用户信息和数据,对于一家互联网公司来说,用户和业务数据是根基.一旦公司的数据错乱或者丢失 ...

  4. Scala入门系列（一）：基础语法

    Scala基础语法 Scala与JAVA的关系 Scala是基于Java虚拟机,也就是JVM的一门编程语言,所有Scala的代码都需要经过编译为字节码,然后交由Java虚拟机来运行. 所以Scala和 ...

  5. PHP入门怎么选？大学生适合学习吗？

    大学毕业,面对竞争激烈的社会,理想总是很丰满,现实却很残酷.在硕士.博士都随处可见的今天,本科和大专文凭就显得苍白无力,在面试官问你"有没有工作经验"的时候,你是不是只想起实习期间 ...

  6. 探究PHP底层

    探究PHP底层 1.PHP是什么?   PHP 指的是我们从外面看到的一套完整的系统.这听起来有点糊涂,但其实并不复杂(PHP4 内部结构图).从功能上来分:我们可以分为三部分: 1. 解释器部分(Z ...

  7. yum中$releasever、 $basearch等变量含义

    [root@kickstart ~]# rpm -qf /etc/redhat-release centos-release--4.1708.el7.centos.x86_64 yum中的$relea ...

  8. PF_RING install in centos7

    很多centos7是最小化安装. 这样很多kernel就没有安装全,而且很多开发库也没有. 在安装PF_RING过程中,会缺少很多依赖. 首先安装依赖包: yum -y install numactl ...

  9. AspNet Core 程序写入配置信息并再次读取配置信息

    1.首先创见Core控制台应用程序  并且引入  AspNetCore.All 首先我们写入配置信息:直接代码如下 //配置信息的根对象 public static IConfigurationRoo ...

  10. 关于Unicode，字符集，字符编码

    基本概念 字符[character] 字符代表了字母表中的字符,标点符号和其他的一些符号.在计算机中,文本是由字符组成的. 字符集合[character set] 由一套用于特定用途的字符组成,例如支 ...