利用 jQuery 製作返回網頁頂部(頁頭)與底部(頁尾)的動態按鈕

「網站返回頁頭」在早期最簡單的使用做法就是幫超連結加入空連結 , 例如"#" , 但這樣的返回效果是立即的, 給瀏覽網站的人感覺會比較突然 , 現在我們可以利用JQuery來製作返回網站頁頭與頁尾帶捲動動作效果的按鈕 , 目前已經非常廣泛運用在許多網站中 , 今天將做法分享出來給各位，一樣先來看一下範例頁面：

          DEMO

JQuery Scrolling to the Top 使用教學

先從返回頂部底部按鈕的css部分開始說起 , 基本的美化筆者不多贅述 , 只提最重要的部分 , 就是將按鈕「固定」在頁面右側 , 不會隨著頁面捲動而消失 , 這時候就要使用css語法中的 「position: fixed」它可以將指定的div固定在頁面指定位置上 , 例如設定「bottom: 70px ; right: 30px;」意指將按鈕定位在頁面右側30px處以及距離頁面底部70px處 , 其它按鈕如果要讓它們垂直堆疊的話 , 水平的位置保持一樣的設置就可以 (即都設定right: 30px) , 然後堆疊部分靠 bottom 的距離來控制 , 這樣就可以將按鈕疊在一起 !

jquery部分 , 可以參考含原文註釋的程式碼 , 主要在撰寫當卷軸捲動時 , 按鈕呈現半透明 , 停止後恢復不透明 ; 以及滑鼠點擊後返回頂部以及底部效果 , "800"是返回頂部與底部移動速度 , 數字越小捲動越快 !

1. $(function() {
   
2.     // the element inside of which we want to scroll
   
3.         var $elem = $('#wrapper');
   
4. 
   
5.         // show the buttons
   
6.     $('#nav_up').fadeIn('slow');
   
7.     $('#nav_down').fadeIn('slow');  
   
8. 
   
9.         // whenever we scroll fade out both buttons
   
10.     $(window).bind('scrollstart', function(){
    
11.         $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    
12.     });
    
13.         // ... and whenever we stop scrolling fade in both buttons
    
14.     $(window).bind('scrollstop', function(){
    
15.         $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    
16.     });
    
17. 
    
18.         // clicking the "down" button will make the page scroll to the $elem's height
    
19.     $('#nav_down').click(
    
20.         function (e) {
    
21.             $('html, body').animate({scrollTop: $elem.height()}, 800);
    
22.         }
    
23.     );
    
24.         // clicking the "up" button will make the page scroll to the top of the page
    
25.     $('#nav_up').click(
    
26.         function (e) {
    
27.             $('html, body').animate({scrollTop: '0px'}, 800);
    
28.         }
    
29.     );
    
30. });

複製代碼

Jquery程式碼部分 , 涉及到的ID部分都可以自由修改成自己使用的ID或CLASS , 使用上非常便利 !

scroll.rar (50.3 KB, 下載次數: 56)

2013-6-6 00:24 上傳

點擊文件名下載附件
閱讀權限: 10