Leah's Life

標題不知道怎麼下比較好~ 其實是捲動 html,body 的 animate 效果
首先記得檢查自己的網頁有無插入 jQuery 檔案

html 插入至網頁的任何區塊：
<span class="btop">back to top</span>

這邊稍微解釋一下這行 script 的意思就是...

滑鼠點擊「span.btop」這個區塊的時候執行 function：
$('html,body').animate({scrollTop: $('#header').offset().top}, 500);

.animate 則是動畫的 function
()內則可指定：(function, speed)
而我這邊的意思則是：html與body.動畫({往上捲動至#header的位置}, 500毫秒)

...
.......感覺很像是在翻譯而已 XD
總之速度可以隨自己高興調快調慢，scrollTop可改成scrollLeft
自行運用變化囉~


這樣這個動畫和 html 基本就完成了
然後視覺再靠 css 去定位

.btop { cursor: pointer; position: fixed; bottom: 2em; right: 2em; display: block; _display: none; width: 105px; height: 20px; text-align: center; line-height: 20px; color: #fff; background: #999 url(http://pic.pimg.tw/leah/1331548872-2458849503.png) no-repeat center 10px; padding: 65px 0 10px; border-radius: 6px; z-index: 99999; }

在此也解釋一下 css 的用意
首先使用 fixed 浮動在視窗右下，指定滑鼠樣式為 pointer 引導 user 可點
IE6 沒有 fixed 的功能，所以直接隱藏 (很壞)
塞背景和顏色等等設定
z-index 層級調高，可依照喜好再加入透明度的設定

demo 如本部落格右下請點↘

以上