效果體驗：http://hovertree.com/texiao/mobile/6/
在pc上我們很容易就可以用scrollTop()來實現流程的向上滾動的返回到頂部的動畫，然後用到web移動端卻沒什麼卵用，會出現滾動不流暢，卡頓，失靈等等現象。
這是因為移動端的scroll事件觸發不頻繁，有可能檢測不到有<=0的情況
為此，移動端判斷次數好些，下面是具體實現代碼，兼容pc：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>移動端返回頂部 - 何問起</title><base target="_blank" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<style>
#tophovertree{display:block;position:fixed;width:36px;height:36px;right:20px;bottom:20px;cursor:pointer;background-image:url(http://hovertree.com/texiao/mobile/6/tophovertree.gif);opacity:0.9;display:none}
a{color:blue}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div style="height:500px;width:100%;">1
<br />請向下滾動頁面，你將會看到返回頂部的按鈕。<br />
<a href="http://hovertree.com/h/bjae/ve3erni6.htm">原文</a> <a href="http://hovertree.com/menu/jquery/">jQuery</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a></div>
<div style="height:500px;width:100%;">2何問起</div>
<div style="height:500px;width:100%;">3</div>
<div style="height:500px;width:100%;">4</div>
<div style="height:500px;width:100%;">5</div>
<div style="height:500px;width:100%;">6 </div>
<div style="height:500px;width:100%;">7</div>
<div style="height:500px;width:100%;">8 keleyi</div>
<div style="height:500px;width:100%;">9</div>
<span id="tophovertree" title="返回頂部"></span>
<script src="http://hovertree.com/texiao/mobile/6/topHovertree.js"></script>
<script>
$(function () { initTopHoverTree("tophov"+"ertree",30,30,10); })
</script>
</body>
</html>
http://hovertree.com/texiao/mobile/6/topHovertree.js 文件的代碼：
/*
jQuery返回頂部
使用方法：initTopHoverTree("tophovertree",30,30,10); }
tophovertree是返回頂部按鈕的ID
by 何問起
hovertree.com
*/
function initTopHoverTree(hvtid, times, right, bottom) {
$("#" + hvtid).css("right", right).css("bottmo", bottom);
$("#" + hvtid).on("click", function () { goTopHovetree(times); })
$(window).scroll(function () {
if ($(window).scrollTop() > 268) {
$("#" + hvtid).fadeIn(100);
}
else {
$("#" + hvtid).fadeOut(100);
}
});
}
//返回頂部動畫
//goTop(500);//500ms內滾回頂部
function goTopHovetree(times) {
if (!!!times) {
$(window).scrollTop(0);
return;
}
var sh = $('body').scrollTop();//移動總距離
var inter = 13.333;//ms,每次移動間隔時間
var forCount = Math.ceil(times / inter);//移動次數
var stepL = Math.ceil(sh / forCount);//移動步長
var timeId = null;
function aniHovertree() {
!!timeId && clearTimeout(timeId);
timeId = null;
//console.log($('body').scrollTop());
if ($('body').scrollTop() <= 0 || forCount <= 0) {//移動端判斷次數好些，因為移動端的scroll事件觸發不頻繁，有可能檢測不到有<=0的情況
$('body').scrollTop(0);
return;
}
forCount--;
sh -= stepL;
$('body').scrollTop(sh);
timeId = setTimeout(function () { aniHovertree(); }, inter);
}
aniHovertree();
}