男丁格爾's 脫殼玩

沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

有時候教學文章內的程式碼太多時，會讓整個頁面變的落落長的。當網友瀏覽到文章最後段落時，如果要回到頁首就需要滾好幾次滾輪才行。所以筆者就在 Blog 的最下方加入一個 Page Top 的鈕，按下去可以自動的把網頁捲軸移動到最上面

除了之接在頁尾的部份提供 Page Top 的功能之外，各位也可以在某些段落就加上 Page Top 鈕。筆者此次就是要教各位如何用 jQuery 來做出這樣體貼瀏覽者的效果。首先準備 HTML：

檢視原始碼 HTML

<body>
	Header
	<pre></pre >
	<a href="#" class="abgne_gotoheader">Go To Header</a>
	<pre></pre >
	<a href="#" class="abgne_gotoheader">Go To Header</a>
	<pre></pre >
	<a href="#" class="abgne_gotoheader">Go To Header</a>
</body>

接著用 CSS 來把 Pre 的 height 加高，用來模擬網頁很長很長的感覺：

檢視原始碼 CSS

1
2
3

pre {
	height: 500px;
}

再來就是看 jQuery 的威力囉：

檢視原始碼 JavaScript

$(function(){
	// 幫 a.abgne_gotoheader 加上 click 事件
	$('a.abgne_gotoheader').click(function(){
		// 讓捲軸移動到 0 的位置
		$('html, body').scrollTop(0);
 
		return false;
	});
});

jQuery 已經把控制捲軸的部份包裝成 .scrollTop() 及 .scrollLeft() 兩函式，它們能把捲軸移動到指定的位置。不過若實際測試效果時會發現它是直接就跳到定點，這樣感覺比較唐突。所以接下來咱們就改用 .animate() 的方式來做出動畫式的移動吧：

檢視原始碼 JavaScript

$(function(){
	// 幫 a.abgne_gotoheader 加上 click 事件
	$('a.abgne_gotoheader').click(function(){
		// 讓捲軸用動畫的方式移動到 0 的位置
		// 感謝網友 sam 修正 Opera 問題
		var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
		$body.animate({
			scrollTop: 0
		}, 600);
 
		return false;
	});
});

scrollTop 雖然在 jQuery 中是一個函式，但它其實也是 DOM 物件的一個屬性，因此我們就能利用改變 scrollTop 值的方式來達到動畫的效果了。

雖然現在捲軸移動已經改善了，但筆者還有個想法：讓網頁就算不支援 JavaScript 或是程式有錯誤時也能正常的使用 Page Top 的效果。

剛剛我們都是用 jQuery 來達到移動捲軸的效果，那有什麼方法能不靠程式而移動呢？答案就是錨點(Anchor)。我們只要利用 HTML 的錨點功能的話，是不是就能快速的跳到指定 ID 的元素上呢！因此筆者把 HTML 稍微改變一下：

檢視原始碼 HTML

<body>
	<a href="#" id="header">Header</a>
	<pre></pre >
	<a href="#header" class="abgne_gotoheader">Go To Header</a>
	<pre></pre >
	<a href="#header" class="abgne_gotoheader">Go To Header</a>
	<pre></pre >
	<a href="#header" class="abgne_gotoheader">Go To Header</a>
</body>

現在我們的 header 區塊是在一個超連結中，同時該連結有個 ID 為 header；其它的 Page Top 的連結也預設是 #header。這樣就算沒有程式的加持也能保持功能不變！

接著程式的部份再加強一下：

檢視原始碼 JavaScript

$(function(){
	// 幫 a.abgne_gotoheader 加上 click 事件
	$('a.abgne_gotoheader').click(function(){
		// 讓捲軸用動畫的方式移動到 #header 的 top 位置
		// 並加入動畫效果
		// 感謝網友 sam 修正 Opera 問題
		var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
		$body.animate({
			scrollTop: $('#header').offset().top
		}, 2000, 'easeOutBounce');
 
		return false;
	});
});

這次筆者就不直接指定移動到 0 的位置，而是利用 .offset() 的方式來取得指定元素的 top 及 left 值，然後再讓捲軸移到該位置上。最後還加上了一個 easeOutBounce 的動畫效果。

只要設計者在小處多用點心，就能讓瀏覽者有更友善及舒適的瀏覽經驗。

範例 1 範例 2 範例 3

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

也許您對這些文章也有興趣

12 筆針對 [jQ]用 jQuery 控制網頁捲軸移動的迴響

Lay 於 2010-04-16 20:55:49 說：

YA~~~終於出來了> <
感謝喔~

回覆 ↓
- 男丁格爾於 2010-04-16 22:58:08 說：
  
  若有其它有趣的效果可以提出來討論~~
  
  回覆 ↓
abgirl 於 2010-04-19 14:49:20 說：

請問男丁
最後的return false
有沒有寫的差別在哪？？

回覆 ↓
- 男丁格爾於 2010-04-19 15:07:53 說：
  
  return false 在這邊可以取消原本超連結預設的動作..
  你可以自己拿掉 return false 後試試反應
  
  回覆 ↓
abgirl 於 2010-04-19 15:28:40 說：

了解^^謝謝
希望下次可以教跟著捲軸上下浮動的範例

回覆 ↓
- 男丁格爾於 2010-04-19 15:30:48 說：
  
  雖然那很簡單...但還是敬請期待 >"<
  
  回覆 ↓
sam 於 2010-07-30 13:35:02 說：

Opear下会闪。
加上这行看行不行
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

回覆 ↓
- 男丁格爾於 2010-07-30 13:42:01 說：
  
  謝謝你的回覆..在 Opera 中同時控制 html 及 body 真的是會造成兩者一起動作的錯亂情況..
  
  回覆 ↓
cky1857 於 2012-04-13 13:57:36 說：

請問丁大我如果想要有一個TOP跟著我的滾軸往下移然後我只要按TOP它就跑到最上面這樣要怎處理呀

回覆 ↓
- 男丁格爾於 2012-04-16 20:16:04 說：
  
  你可以參考其它廣告效果, 像是網頁捲軸滾動式廣告
  
  回覆 ↓
terry 於 2012-05-10 16:53:43 說：

大師,請問是否有,button控式上下移動scrollbar
的套件,因為我發現ipad 環境,scrollbar 都會不見,觸控也很難拉上拉下
都會變成移動ipad 視窗

回覆 ↓
- 男丁格爾於 2012-05-11 11:35:04 說：
  
  現成外掛可以參考 jQuery.ScrollTo
  
  回覆 ↓