寫移動端的時候，引入的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>