写移动端的时候，引入的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. 乐呵乐呵得了 golang入坑系列

    开场就有料,今天返回去看了看以前的文章,轻松指数有点下降趋势.一琢磨,这不是我的风格呀.一反思,合着是这段时间,脑子里杂七杂八的杂事有点多,事情一多,就忘了快乐.古话说得好:愁也一天,乐也一天,只要还 ...

  2. RaspberryPi2B使用bcm2835c库控制GPIO

    RaspberryPi2B使用bcm2835c库控制GPIO 网上有很多RaspberryPi控制GPIO的方法,有Python.WiringPi.bcm2835 C library 使用bcm283 ...

  3. javascript语言基础

    js的基本语法 /* 多行注释 * */ //单行注释 // 变量赋值 默认以换行符作为结束符,有分号以分号作为结束符号 var i; i=10; s="hello"; var b ...

  4. #centos7 创建内网yum源 OpenStack源部署

    #centos7 创建内网yum源#centos7 自动化安装 本地 内网 web源创建.更新 createrepo http OpenStack源部署 Elven原创 http://www.cnbl ...

  5. video字幕无法显示，video视频在google中无法控制快进

    video字幕(track)无法显示: 直接用关闭同源策略的浏览器打开你的HTML文件可以请求到字幕文件并显示字幕: 从hbuilder中打开html文件,在从里面打开google浏览器去浏览HTML ...

  6. javascript设计模式——迭代器模式

    前面的话 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示.迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也 ...

  7. sqlserver 查询所有表及记录行数

    --查询所有表名 select name from sysobjects where xtype='u' select * from sys.tables --查询所有表名及对应架构 select t ...

  8. java web学习笔记 servlet

    关于java web web.xml中一般配置的都是与servlet先关的可以配置servlet filter listener context-param用来配置web应用的启动参数,可用通过Ser ...

  9. Uva 12436 Rip Van Winkle&#39;s Code

    Rip Van Winkle was fed up with everything except programming. One day he found a problem whichrequir ...

  10. 【NOI2010】海拔【平面图最小割】

    [问题描写叙述] YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见.能够将YT市看作 一个正方形,每个区域也可看作一个正方形.从而.YT城市中包含(n+1)×(n+ ...