在網站設計中,我們需要針對大量的資料訊息去做處理規劃,有時候不知不覺,版面就會越排越長;又或者是依照客戶需求,設計出一頁式的活動型、宣傳型網站。
此時萬一你的網站主導覽按鈕 (navigation) 又沒有做 fixed 的處理時,想想看,頁面瀏覽到底部,還要捲動超長一段距離才能回到頂端去點擊其他的單元按鈕,對使用者來說操作就會變得很不方便,體驗度下降。
我們可以設計一個小按鈕幫助使用者有更好的體驗環境,不管瀏覽至頁面任何位置,都可以輕鬆回到網頁頂端,減輕手指滾輪的負擔。

jQuery製作頁面捲動置頂效果


其實這個方式一直都有被使用,某些網站會在頁面各段落設置按鈕幫助使用者回到頂端,之後常見到的是會將這類按鈕浮動在頁面某個位置,這樣的設計更加靈活便利。
這種方法都是利用“錨點”的特性來製作,在 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>
  1. HTML 程式碼的部份如上,在這個範例中我們會先建立一些 section 區塊,是為了撐高整體頁面高度而做,實際應用在網站中時我們只需要 “gotop” 這個按鈕即可。
  2. 按鈕本身使用任何的標籤都可以,方便辨別,通常使用 “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;
}
  1. 在 CSS 的部份,除了 id 名稱 “gotop” 以外,是為了範例排版需求而設定,實際套用時不需使用
  2. 按鈕的外觀樣式是自由設定的,依照設計的需求可任意變更,甚至使用圖片也可以,範例使用偽元素 “:before”來製作
  3. 一般網站中,回頁面頂端的按鈕,通常會設計在版面的右下角,比較符合使用者習慣,所以我們要注意幾個屬性
    1. “position:fixed”:位置的屬性我們使用 fixed,這樣是確保按鈕可以在不管瀏覽到網頁的任何位置都可以點擊到他
    2. “right:50px”、”bottom:50px”:有了定位的屬性後,設定好定位的距離,在範例中我們想要按鈕浮動在右下,所以設定距離右邊 50px,底部 50px,數值視需要可以自行調整
    3. “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>
  1. 首先可以先到 jQuery 官方網站去下載適用的版本來 include。
  2. 我們要呈現的功能是點擊按鈕後,讓頁面捲動到網頁的最頂端
  3. code line 4,我們先取得使用的物件命名方便操作
  4. code line 5,設定好捲動速度
  5. code line 7~9,將按鈕建立 “點擊 click” 的動作
  6. code line 8,點擊按鈕後,頁面會執行動態 “animate” 指令,處理的內容 “scrollTop:0”,scrollTop 這個屬性代表著頁面向下捲動的距離,我們設定這個數值為 0,代表頁面未向下捲動,也就是網站剛 loading 進來的畫面,正好是頁面頂端。動作最後,將 “goSpeed” 代入,它負責控制捲動的速度
  7. 完成以上流程後,就可以使用頁面捲動置頂的效果了

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料