Animated Scroll to Top 以動畫方式移動到最頂端

Animated Scroll to Top 以動畫方式移動到最頂端，當頁面的滾到條滾到一定的位置的時候，將會顯示出一個向上的按鈕，點擊該按鈕畫面就會慢慢地向上滾動。這是一個利用了 jQuery 框架實作的一個自動滾到到頁面頂部的一個套件。

使用方法：
第一步 載入 Animated Scroll to Top 需要使用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

第二步 設計 CSS 樣式表
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}

第三步 使用 JavaScript 使 Animated Scroll to Top 初始化
$(function(){
// 一開始先隱藏
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// 滑到頂端
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});

作者網站：http://webdesignerwall.com/
檔案大小：7.12 KB (包含範例)
檔案下載：http://webdesignerwall.com/file/scroll-to-top.zip
備份下載：下載