在“jQuery滾動事件scroll()”這一節我們給大家介紹了“回頂部特效”的原理，不過那個例子只是一個簡單的回頂部特效。在這一節，我們在原來例子上結合jQuery動畫制作一個用戶體驗更好的回頂部特效。
實現代碼如下:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
height:1800px;
}
#back-to-top
{
position:fixed;
right:50px;
bottom:50px;
display:none; /*設置默認情況下元素為隱藏狀態*/
width:40px;
height:40px;
color:white;
background-color:#45B823;
font-family:微軟雅黑;
font-size:15px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
/*根據滾動距離判斷按鈕是否顯示或隱藏*/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#back-to-top").fadeIn(200);
}
else {
$("#back-to-top").fadeOut(200);
}
});
/*實現點擊滾動回頂部*/
$("#back-to-top").click(function () {
$("html,body").animate({ scrollTop: 0 }, 500);
});
})
</script>
</head>
<body>
<div id="back-to-top">回到頂部</div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們拖動滾動條一段距離（300px）之後，預覽效果如下：
分析：
幾個簡單的動畫效果，有時候卻能極大地提供用戶體驗。