jQuery學習筆記第八堂-3（單頁式網頁設計：製作回到網頁頂端按鈕） ~ PJCHENder<br>那些沒告訴你的小細節

本堂課主要是延續上一篇jQuery學習筆記第八堂-2，這次加入了「回到頁頂」的按鈕效果，點這裡看結果。

關於如何回到網頁頂端的按鈕製作方式，其實在之前的網誌中已經介紹過了（在網頁(blogger)中加入回到網頁頂端的浮動按鈕），這裡再做一個比較清楚的說明。

STEP 1建立「向上」的按鈕樣式

建立「向上」按鈕樣式的方法很多，這裡我打算直接使用Font Awesome所提供的圖案（關於Font Awesome的使用可以參考這篇：如何使用Font Awesome所提供的各種icon）。

首先，在<head></head>中間插入匯入FontAwesome的語法

接著，在網頁的最下方，我新增一個class為「gotop」的區塊，裡面就嵌入Font Awesome的圖片

這時候，網頁的最左下方就會出現一個向上的圖案了（第一次使用Font Awesome的時候，可能會需要花一些時間，才會讀取到該圖片）

接著，我就來幫這個向上的按鈕，透過CSS的方式，改變成我想要的顏色，並且放到我想要的位置，這裡用position: fixed是因為我們希望該圖片會一直固定在瀏覽器的右下角，cursor:pointer，則是當網友把滑鼠移到這個圖片的時候，它會呈現出像是「手指」可以點擊這樣的符號。

最後按鍵的結果就會固定在瀏覽器的右下角。

撰寫回到頁頂的jQuery語法

語法很簡單，告訴它，當這個按鈕被點擊的時候，幫我回到網頁頂端

比較需要留意的是這裡有一個n=1的指令，之所以要有這個指令，是因為在我們前一堂課中所使用的mousewheel功能，如果網友已經看到最後一頁，按回到頁頂的按鈕，這時候畫面會跳到第一頁，但是如果沒有更新讓n=1，這時候網友如果滾動滑鼠的話，會直接跳到最後一頁。

當網友離開第一頁後才產生gotop按鈕

最後一步，我們希望當網友離開第一頁，到達第二頁後，gotop按鈕才顯示出來，寫法像這樣子：

這裡比較要注意的地方是，最上面有一行$(".gotop").fadeOut(0)，這個的用意是在一開始進入網頁的時候，不要出現gotop按鈕，fadeOut裡面的0是duration，設成0是因為一進來就不要看到。

if的指令裡面用>=$(".p02").offset().top，意思是如果現在捲軸的位置大於等於第二頁的話，在出現（fadeIn），否則不要出現（fadeOut），在一般的情況下，我們也可以設成「if($(window).scrollTop()>0)」就可以了。

寫到這就完成這個回到頁頂的按鈕了！

看一下我們的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>單頁輪撥式網站設計</title>
<!--    匯入FontAwesome   -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--    匯入jQuery    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="jquery.mousewheel.min.js"></script>
    <script>
        $(document).ready(function(){
            var num_li=$("li").length//偵測我們有幾個標點（圖片）
            
            //滾動滑鼠滾輪時，移動到上一頁、下一頁的效果
            n=1
            moving=0
            $(window).mousewheel(function(e){
                $("html,body").stop()
                if(moving==0){
                    moving=1
                    if(e.deltaY==-1){
                        if(n<num_li){
                            n++
                        }
                    }else{
                        if(n>1){
                            n--
                        }
                    }
                }
                $("html,body").animate({"scrollTop":$(".p0"+n).offset().top},function(){moving=0})
            })
            
            //根據捲軸的位置改變右方導覽列游標的顏色
            $(window).scroll(function(){
                 if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav li:eq(0)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav li:eq(1)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav li:eq(2)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav li:eq(3)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p05").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav li:eq(4)").css("background-color","#46dd46")
                }
            })
                     
            //點選右方導覽列時會到指定圖片
            for(i=0;i<=num_li;i++){
                $(".nav li:eq("+i+")").click({id:i},function(e){
                    $("html,body").stop()
                    $(".nav li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    page=e.data.id+1
                    $("html,body").animate({"scrollTop":$(".p0"+page).offset().top})
                    $(".nav li:eq("+e.data.id+")").css("background-color","#46dd46")//被點擊到的游標變色，前面的selector用this也可以
                    n=e.data.id+1
                })
            }
            //一進入網頁時，將導覽列垂直置中計算導覽列置中的位置
           center()
            
           //縮放網頁時，將導覽列垂直置中
            $(window).resize(function(){
                center()
            })
            
            //計算導覽列垂直置中的高度
            function center(){
                pos=$(window).height()/2-$(".nav").height()/2
                $(".nav").css("top",pos)
            }
            
            //離開頁頂時才出現gotop按鈕
            $(".gotop").fadeOut(0)
            $(window).scroll(function(){
                if($(window).scrollTop()>=$(".p02").offset().top){
                    $(".gotop").fadeIn()
                }else{
                    $(".gotop").fadeOut()
                }
            })
            
            //點擊goptop時回到頁頂
            $(".gotop").click(function(){
                $("html,body").stop()
                $("html,body").animate({"scrollTop":"0"})
                n=1
            })
        })
    </script>
<style>
    *{
        padding:0;
        margin:0;
    }
    body{
        overflow: hidden;
    }
/*    插入背景圖片    */
    .p01{
        background-image:url(images/p01.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p02{
        background-image:url(images/p02.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p03{
        background-image:url(images/p03.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p04{
        background-image:url(images/p04.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p05{
        background-image:url(images/p05.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
/*    插入導覽列     */
    .nav{
        position: fixed;
        top:50%;
        right:0px;
        cursor:pointer;
    }
    li{
        width:10px;
        height:10px; 
        margin: 10px;
        background-color: white;
        border-radius: 5px;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.5) inset,-1px -1px 1px rgba(0,0,0,0.5) inset;
        list-style-type: none;
    }
    h1{
        font-size:60px;
        color:ghostwhite;
        text-shadow:0px 0px 15px black;
    }
    .gotop{
        color:rgba(226,248,156,0.9);
        position:fixed;
        bottom:2vh;
        right:5vh;
        cursor:pointer;
    }
</style>
</head>
<body>
<div class="container">
    <div class="nav">
        <ul>
            <li style="background-color:#46dd46"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="p01"><h1>Page 1</h1></div>
    <div class="p02"><h1>Page 2</h1></div>
    <div class="p03"><h1>Page 3</h1></div>
    <div class="p04"><h1>Page 4</h1></div>
    <div class="p05"><h1>Page 5</h1></div>
</div>
<div class="gotop">
    <i class="fa fa-arrow-circle-up fa-2x"></i>
</div>


</body>
</html>

點這裡看結果。

以上內容均為本人在馬老師雲端研究室學習所整理之筆記

PJCHENder
那些沒告訴你的小細節

—不怕面對改變，敢於挑戰不熟悉的事物—

2015年4月20日

jQuery學習筆記第八堂-3（單頁式網頁設計：製作回到網頁頂端按鈕）

0 意見:

張貼留言