Home » jQuery 應用

[jQ]用 jQuery 控制網頁捲軸移動

[ 日期： | 瀏覽：190,095 | 迴響：23 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

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



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

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<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
1
2
3
4
5
6
7
8
9

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

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

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

$(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
1
2
3
4
5
6
7
8
9

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(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

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

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

1 2

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

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

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

  7. 請問如果我要改成
    按下後會出現往上的按鈕，往下按鈕現在不見
    按下往上時，會出現往下的按鈕，往上按鈕不見

    要如果何？？

    謝謝

  10. 你好
    我想詢問
    像我把你說的寫進去
    但是 我那個目錄裡 下面還有副目錄 可以點選 他的內容就會呈現在下面
    當把 go to head放在那 點選之後他會整個網頁往上跑 跑到網頁最頂
    但是我是我希望它可以跑到副目錄那
    請問要怎麼改才好呢><

1 2

發表迴響