Home » jQuery 應用

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

[ 日期： | 瀏覽：188,823 | 迴響：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. http://mijuland.net/tcbank/2015c/

    這是我幫客戶設計的網頁，箭頭移動的功能是看您網站上面的教學所作的。但是這個功能在除了IE的瀏覽器中，我試了chrome, Firefox, Safari，都可以順利執行，只有IE中的執行有點奇怪，第一個箭頭可以順利移到錨點的位置，但第二個以後的箭頭會無法按照錨點的位置移到定位。（而且他移動的位置我看不出來前因後果）

    因為我是美術設計專長，並不擅長程式語言，是否可以幫我看看，是哪裡出問題。

    我是用mac的chorme預覽，所以一開始沒有注意到這個問題，但客戶那邊大部分是使用IE，所以希望能做到IE也相容的情況。

    網站上面有寫可以付費300元將這個功能加到網頁上，但是點進去之後的連結好像有些問題，費用的事情再麻煩跟我說明。

    (我的email是masonyin813@gmail.com)

    ps.與我聯絡的地方，表格填完不知為什麼沒有送出的按鈕。

  6. 我使用第三個範例，想要滑動到指定DIV

    但我的整個網頁上有一個固定的導覽列
    所以我先放了一個空白的Div在我正式的內容上，要讓scrollTop的時候不要遮住正式的內容

    #anchor {
    display: block;
    height: 180px;
    padding-top:180px;
    }

    JavaScript：

    $(document).ready(function(){
    $('.mypresta_scrollup').click(function(){
    $("html, body").animate({
    scrollTop: $('#anchor').offset().top
    }, 800, 'swing');
    return false;
    });

    第一次按.mypresta_scrollup的時候都可以正常滑動到#anchor的offset().top，
    但如果在不重整的狀況下重新滑動到下面，再按.mypresta_scrollup，會滑到#content的top

    不知道是什麼原因?
    謝謝

1 2

發表迴響