在網站設計中，我們需要針對大量的資料訊息去做處理規劃，有時候不知不覺，版面就會越排越長；又或者是依照客戶需求，設計出一頁式的活動型、宣傳型網站。
此時萬一你的網站主導覽按鈕 (navigation) 又沒有做 fixed 的處理時，想想看，頁面瀏覽到底部，還要捲動超長一段距離才能回到頂端去點擊其他的單元按鈕，對使用者來說操作就會變得很不方便，體驗度下降。
我們可以設計一個小按鈕幫助使用者有更好的體驗環境，不管瀏覽至頁面任何位置，都可以輕鬆回到網頁頂端，減輕手指滾輪的負擔。
其實這個方式一直都有被使用，某些網站會在頁面各段落設置按鈕幫助使用者回到頂端，之後常見到的是會將這類按鈕浮動在頁面某個位置，這樣的設計更加靈活便利。
這種方法都是利用“錨點”的特性來製作，在 a 連結設定空錨點，點擊之後錨點連結不到目標 id，就會自動跳到頁面最頂端。
這樣的方式固然有用，但對於使用者體驗沒有加分的作用，本篇教學會使用 jQuery 動態的方式來製作，以下就跟著一起試試看吧。
HTML
<div id="section-1" class="section"><span>Section-1</span></div> <div id="section-2" class="section"><span>Section-2</span></div> <div id="section-3" class="section"><span>Section-3</span></div> <a id="gotop">gotop</a>
- HTML 程式碼的部份如上，在這個範例中我們會先建立一些 section 區塊，是為了撐高整體頁面高度而做，實際應用在網站中時我們只需要 “gotop” 這個按鈕即可。
- 按鈕本身使用任何的標籤都可以，方便辨別，通常使用 “a”
CSS
.section {
position: relative;
height: 1000px;
}
.section span {
display: block;
font-family: arial;
font-size: 60px;
color: #FFF;
line-height: 1000px;
letter-spacing: 2px;
font-weight: bold;
text-align: center;
}
#section-1 {
background: #06C;
}
#section-2 {
background: #09C;
}
#section-3 {
background: #09F;
}
#gotop {
position: fixed;
right: 50px;
bottom: 50px;
display: block;
width: 60px;
height: 60px;
background: #FFF;
border-radius: 50%;
text-indent: -9999px;
z-index: 1
}
#gotop:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 0;
height: 0;
margin: -7px 0 0 -10px;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #333 transparent;
}
- 在 CSS 的部份，除了 id 名稱 “gotop” 以外，是為了範例排版需求而設定，實際套用時不需使用
- 按鈕的外觀樣式是自由設定的，依照設計的需求可任意變更，甚至使用圖片也可以，範例使用偽元素 “:before”來製作
- 一般網站中，回頁面頂端的按鈕，通常會設計在版面的右下角，比較符合使用者習慣，所以我們要注意幾個屬性
- “position:fixed”：位置的屬性我們使用 fixed，這樣是確保按鈕可以在不管瀏覽到網頁的任何位置都可以點擊到他
- “right:50px”、”bottom:50px”：有了定位的屬性後，設定好定位的距離，在範例中我們想要按鈕浮動在右下，所以設定距離右邊 50px，底部 50px，數值視需要可以自行調整
- “z-index”：有時都設定好了，但發現頁面上找不到按鈕？通常在網頁中有許多元素，它們的優先性可能會去覆蓋到按鈕，提高優先層級把按鈕放到元素的最前方吧
JS
<script src="jquery.min.js"></script>
<script>
$(function(){
var $gotop = $('#gotop') ,
goSpeed = 800 ;
$gotop.click(function(e) {
$('html , body').animate({scrollTop:0} , goSpeed);
});
});
</script>
- 首先可以先到 jQuery 官方網站去下載適用的版本來 include。
- 我們要呈現的功能是點擊按鈕後，讓頁面捲動到網頁的最頂端
- code line 4，我們先取得使用的物件命名方便操作
- code line 5，設定好捲動速度
- code line 7~9，將按鈕建立 “點擊 click” 的動作
- code line 8，點擊按鈕後，頁面會執行動態 “animate” 指令，處理的內容 “scrollTop:0”，scrollTop 這個屬性代表著頁面向下捲動的距離，我們設定這個數值為 0，代表頁面未向下捲動，也就是網站剛 loading 進來的畫面，正好是頁面頂端。動作最後，將 “goSpeed” 代入，它負責控制捲動的速度
- 完成以上流程後，就可以使用頁面捲動置頂的效果了