代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script><style>
p#top{ position:fixed;display:none;bottom:100px;right:80px;}
p#top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;transition:color 1s;}
p#top a:hover{ color:#979797; }
p#top a span{background:url(top.png) no-repeat center;border-radius:6px;display:block;height:64px;transition:background 1s;}
#top a:hover span{background:url(top.png) no-repeat center;}
</style>
<script>
$(document).ready(function(e) {
//當滾動條的位置處于距頂部100像素以下時，跳轉鏈接出現，否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出現跳轉箭頭
$("#top").fadeIn(1500); //大于1500行時跳轉箭頭慢慢透明顯示
}
else
{
$("#top").fadeOut(1500); //大于1500行時跳轉箭頭慢慢透明消失
}
});
//當點擊跳轉鏈接后，回到頁面頂部位置
$("#top").click(function(){
$('body,html').animate({scrollTop:0},1000);//1s完成回到頂部
return false;
});
});
});
</script>
</head>
<body>
<div style="width: 100%;height: 2000px;"></div>
<p id="top">
<a href="#top">
<span></span>
返回頂部
</a>
</p>
</body>
</html>
新聞熱點
疑難解答
