有時候教學文章內的程式碼太多時,會讓整個頁面變的落落長的。當網友瀏覽到文章最後段落時,如果要回到頁首就需要滾好幾次滾輪才行。所以筆者就在 Blog 的最下方加入一個 Page Top 的鈕,按下去可以自動的把網頁捲軸移動到最上面
除了之接在頁尾的部份提供 Page Top 的功能之外,各位也可以在某些段落就加上 Page Top 鈕。筆者此次就是要教各位如何用 jQuery 來做出這樣體貼瀏覽者的效果。首先準備 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 加高,用來模擬網頁很長很長的感覺:
1 2 3 | pre { height: 500px; } |
再來就是看 jQuery 的威力囉:
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() 的方式來做出動畫式的移動吧:
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 稍微改變一下:
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。這樣就算沒有程式的加持也能保持功能不變!
接著程式的部份再加強一下:
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 的動畫效果。
只要設計者在小處多用點心,就能讓瀏覽者有更友善及舒適的瀏覽經驗。
YA~~~終於出來了> <
感謝喔~
若有其它有趣的效果可以提出來討論~~
請問男丁
最後的return false
有沒有寫的差別在哪??
return false 在這邊可以取消原本超連結預設的動作..
你可以自己拿掉 return false 後試試反應
了解^^謝謝
希望下次可以教跟著捲軸上下浮動的範例
雖然那很簡單...但還是敬請期待 >"<
Opear下会闪。
加上这行看行不行
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
謝謝你的回覆..在 Opera 中同時控制 html 及 body 真的是會造成兩者一起動作的錯亂情況..
請問丁大 我如果想要有一個TOP跟著我的滾軸往下移 然後我只要按TOP它就跑到最上面 這樣要怎處理呀
你可以參考其它廣告效果, 像是 網頁捲軸滾動式廣告
大師,請問是否有,button控式上下移動scrollbar
的套件,因為我發現ipad 環境,scrollbar 都會不見,觸控也很難拉上拉下
都會變成移動ipad 視窗
現成外掛可以參考 jQuery.ScrollTo
請問如果我要改成
按下後會出現往上的按鈕,往下按鈕現在不見
按下往上時,會出現往下的按鈕,往上按鈕不見
要如果何??
謝謝
這只要利用 .show() 或是 .hide() 來控制你要顯示或隱藏的元素就可以
請問捲軸 往下捲
右邊小視窗都不會被捲上去
這種效果該怎麼做@@
http://jsfiddle.net/YYzVq/embedded/result/
補充~~~例如當我的視窗高度>1000時,可以把某區塊的DIV 凍結在畫面最上方 XD
你好
我想詢問
像我把你說的寫進去
但是 我那個目錄裡 下面還有副目錄 可以點選 他的內容就會呈現在下面
當把 go to head放在那 點選之後他會整個網頁往上跑 跑到網頁最頂
但是我是我希望它可以跑到副目錄那
請問要怎麼改才好呢><