js之jquery實(shí)現(xiàn)點(diǎn)擊上移到頂部功能

我總結(jié)了幾種方法，現(xiàn)在從簡單到復(fù)雜依次看看幾種實(shí)現(xiàn)效果的方法：

DEMO一：

這種效果是最原始的腐螟，也是最簡單的窑业。當(dāng)頁載入時钦幔，這個按鈕就存在，并固定在頁面的底部数冬，頁面垂直滾動條離頂部有一定的距離時节槐，點(diǎn)擊“點(diǎn)我回到頁面頂部”按鈕時，頁面就會回到頂部拐纱。那就一起看看其實(shí)現(xiàn)過程吧：

//html
<div class="container">
    <div class="header"> 我是頭部</div>
    <div class="content">我是主內(nèi)容铜异，高度是2500px</div>
    <div class="footer">我是在最底部</div>
    <div id="goToTop"><a href="javascript:;">點(diǎn)我回到頁面頂部</a></div>
 </div>

為了更好看測試效果，我們給上面標(biāo)簽元素加上一定的樣式：

//css
<style type="text/css">
   .container {
      width:980px;
      margin:0 auto;
      height:auto;
      min-height:100%;
      position:relative;
   }
   .content {
      height: 2500px;
      border: 1px solid red;
   }
   #goToTop {
      position: fixed;
      bottom: 20px;
      right: 10%;
   }
  #goToTop a {
      background: none repeat scroll 0 0 #f90;
    border: 1px solid #CCCCCC;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    color: #fff;
    font-size: 14px;
    padding: 22px 5px;
    text-decoration: none;
    text-shadow: 0 1px 0 #999;
    -webkit-text-shadow: 0 1px 0 #999;          
     }
 </style>

在<head></head>中加上jQuery的庫：

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

（注：后面的例子都需要這個庫秸架，所以后面沒有特殊說明的情況下揍庄，這個庫都在head標(biāo)簽中存在。）
現(xiàn)在我們就給其加上一定的jQuery代碼：

//js
<script type="text/javascript">
    $(document).ready(function(){
        $('#goToTop a').click(function(){
            $('html,body').animate({scrollTop:0},'slow');
        });
    });
</script>

接下來HTML代碼和CSS的代碼都是在DEMO基礎(chǔ)上寫的东抹，后面的HTML和CSS直接在DEMO上添加或修改即可蚂子，為了節(jié)省大家的時間我就不在列出來了，我們主要就是看看jQuery代碼的變化：

DEMO二：

Demo二這種方法實(shí)現(xiàn)的更理性化缭黔，也更完美化：也就是說一開始我這個按鈕是隱藏的食茎，只有我們的垂直滾動條距頂部有一定的距離后，這個按鈕才會淡出顯示馏谨，當(dāng)回到頂滾動條回到頂部時别渔，此按鈕就又會淡淡的隱藏。我們就一起看看其實(shí)現(xiàn)過程吧：

//js
<script type="text/javascript">
    $(document).ready(function(){
        $("#goToTop").hide()//隱藏go to top按鈕
        $(function(){
            $(window).scroll(function(){
                if($(this).scrollTop()>1){//當(dāng)window的scrolltop距離大于1時，go to top按鈕淡出哎媚，反之淡入
                    $("#goToTop").fadeIn();
                } else {
                    $("#goToTop").fadeOut();
                }
            });
        });
     

        // 給go to top按鈕一個點(diǎn)擊事件
        $("#goToTop a").click(function(){
            $("html,body").animate({scrollTop:0},800);//點(diǎn)擊go to top按鈕時喇伯，以800的速度回到頂部，這里的800可以根據(jù)你的需求修改
            return false;
        });
    });
</script>

試試吧拨与，我想你會更喜歡這種效果稻据，同時也會更有成就感。（注：這個Demo在IE6下CSS需做一定的處理买喧，才能正常顯示）

DEMO三：

DEMO三比前面兩個DEMO都稍微更復(fù)雜一點(diǎn)捻悯，不過你理解了前面兩個DEMO的話，我想你對這個Demo也不會感覺復(fù)雜岗喉，首先我們先看看各位代碼的變化吧秋度。

//html
<div class="container">
        <div class="header"> 我是頭部</div>
        <div class="content">我是主內(nèi)容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
 </div>

跟前面的代碼相比較钱床，我們可以明顯的看出荚斯，這個DEMO少了一個div:

<div id="goToTop"><a href="#">點(diǎn)我回到頁面頂部</a></div>

大家一定會感覺很奇怪，沒了這個按鈕查牌，怎么點(diǎn)擊回到頂部呢事期？想得也是沒有錯，我一開始也是這么想的纸颜，但后來看完整個DEMO后才恍然大悟兽泣，所以大家先別急，接著往下看胁孙。

//css
#goToTop {
     position: absolute;
     right: -130px;
     z-index: 9000;
}

其他樣式代碼都是一樣的唠倦，這里只是對goToTop的div稍作修改了一下。雖然我們在HTML中暫時不存在這樣的一個div涮较，但我們后面還是用得上的稠鼻，所以先把樣式在這里修改好加上去。完成這兩步了狂票，又到了實(shí)現(xiàn)效果的關(guān)鍵一步：

//js
<script type="text/javascript">
    $(function(){
        var topDistance = 600;//goToTop距瀏覽器頂端的距離候齿，這個距離可以根據(jù)你的需求修改
        var showDistance = 1;//距離瀏覽器頂端多少距離開始顯示goToTop按鈕，這個距離也可以修改闺属，但不能超過瀏覽器默認(rèn)寬度慌盯，為了兼容不同分辨率的瀏覽器，我建議在這里設(shè)置值為1掂器；
        var goToTopButton = "<div id='goToTop'><a href='#'>點(diǎn)我回到頁面頂部</a></div>";//定義一個變量亚皂，方便后面加入在html元素標(biāo)簽中插入這個goToTop按鈕的標(biāo)簽
        var thisTop = $(window).scrollTop() + topDistance;
        $("div.container").append(goToTopButton);//在container的div里插入我們前面定義好的html標(biāo)簽元素
        $("#goToTop").css("top",thisTop);//設(shè)置goToTop按鈕top的css屬性和屬性值
       

        if($(window).scrollTop() < showDistance) {
            $("#goToTop").hide();//滾動條距離頂端的距離小于showDistance是隱藏goToTop按鈕
        }
      

        $(window).scroll(function(){
            thisTop = $(this).scrollTop() + topDistance;
            $("#goToTop").css("top",thisTop);//修改goToTop按鈕的top距離
            if($(this).scrollTop() < showDistance) {//當(dāng)window的垂直滾動條距頂部距離小于showDistance設(shè)置的值 時
                $("#goToTop").fadeOut("fast");//goToTop按鈕淡出
            } else {
                $("#goToTop").fadeIn("fast");//反之按鈕淡入
            }
        });
         //給go to top按鈕綁定一個click事件      
        $("#goToTop a").click(function(){
            $("html,body").animate({scrollTop:0},"slow");//慢慢回到頁面頂部
            return false;
        });
    });
</script>

這個DEMO是不是更合理的呀。這里有一點(diǎn)需要再次解釋一下：最開始我們在HTML并沒有加上goToTop的元素国瓮，怎么就有了呢孕讳？主要是我們通過jQuery加載了這個按鈕的html標(biāo)簽匠楚，大家只要留意一下巍膘，我們加載頁面后厂财，通過firebug就可以看到這個按鈕的標(biāo)簽也同時加載進(jìn)來了：

DEMO四：

現(xiàn)在我們要看的這個Demo是通過配合jQuery的插件來實(shí)現(xiàn)回到頁面頂部的效果，我們一起來看看其實(shí)現(xiàn)的過程峡懈。其中HTML 和CSS和我們一開始說的Demo一的是一樣的璃饱，我們現(xiàn)在主要看其插件如何寫，接著是如何調(diào)用寫好的插件肪康。

//js
<script type="text/javascript">
   //編寫jQuery的回到頁面頂部的插件
    $.fn.goToTop = function(){
        if($(window).scrollTop() < 1) {
            $("#goToTop").hide();//滾動條距離頂端的距離小于showDistance是隱藏goToTop按鈕
        }
        $(window).scroll(function(){
                if($(this).scrollTop()>1){
                    $("#goToTop").fadeIn();
                } else {
                    $("#goToTop").fadeOut();
                }
            });
         //給這個按鈕綁定一個單擊事件 
        this.bind('click',function(){
            $('html,body').animate({scrollTop:0},'slow');
            return false;
        });        
    }
    //調(diào)用這個插件
    $(document).ready(function(){
        $('#goToTop').goToTop();
    });
</script>

DEMO五：

這個demo也是通過插件的方式實(shí)現(xiàn)的荚恶，但們跟demo4還是有一定的區(qū)別，首先我們看HTML和CSS代碼：

//html
<div class="container">
    <div class="header"> 我是頭部</div>
      <div class="content">我是主內(nèi)容磷支，高度是2000px</div>
      <div class="footer">我是在最底部</div>
</div>

//css
#goToTop {
     position: fixed;
     right: 10%;
     z-index: 9000;
     bottom: 10px;
}

//js
<script type="text/javascript">
  //編寫一個插件叫做goToTop
   $.fn.goToTop = function(settings) {
       settings = $.extend({
           min: 1,  //設(shè)置距離頂部的最小值為1
           fadeSpeed: 200,  //設(shè)置一個淡出淡入的速度
           ieOffset: 50  //處理IE的兼容問題
       },settings);
       return this.each(function(){
           //listen for scroll
           var el = $(this);
          //  el.css("display","none");//in case the user forgot
           $(window).scroll(function(){
               //stupid IE hack
               if(!$.support.hrefNormalized) {  //設(shè)置這個按鈕的css屬性
                   el.css({
                       "position": "absolute",
                       "top" : $(window).scrollTop() + $(window).height() - settings.ieOffset
                   });
               }
               if($(window).scrollTop() >= settings.min) {
                   el.fadeIn(settings.fadeSpeed);
               } else {
                   el.fadeOut(settings.fadeSpeed);
               }
           });
       });
   };
   $(function(){
       var goToTopButton = "<div id='goToTop'><a href='#'>點(diǎn)我回到頁面頂部</a></div>";
       $("div.container").append(goToTopButton);  //插入按鈕的html標(biāo)簽
       if($(window).scrollTop() < 1) {
           $("#goToTop").hide();//滾動條距離頂端的距離小于showDistance是隱藏goToTop按鈕
       }
       $("#goToTop").goToTop({
           min:1,
           fadeSpeed: 500
       });
       $("#goToTop").click(function(e){
           $("html,body").animate({scrollTop:0},"slow");
           return false;
       });
   });
</script>

在這里解釋幾個參數(shù)$.fn給jquery添加自定義事件的谒撼；$.extend函數(shù)用于將一個或多個對象的內(nèi)容合并到目標(biāo)對象，語法$.extend( target [, object1 ] [, objectN ] )意思就是把后面的object1雾狈，objectN 合并到target中廓潜，重合的屬性把target中屬性值替換掉，沒有的屬性善榛，添加上辩蛋；$.support判斷包含表示不同瀏覽器特性或漏洞其中$.support.hrefNormalized判斷瀏覽器是不是正規(guī)化（即標(biāo)準(zhǔn)瀏覽器因?yàn)橛行┑桶姹緦傩圆恢С掷鏸e6）。
大家可以對比一下移盆，demo四和demo五的兩種插件寫法的相同與不同之處悼院。

DEMO六：

這個Demo是我們今天要說的最后一個效果了，這個效果跟前面的每一個demo都有一點(diǎn)不同咒循，主要有以下幾個不同點(diǎn)：第一据途，我們是通過jQuery給頁面加載了一個頂點(diǎn)的錨點(diǎn)和一個回到頂部的按鈕，第二點(diǎn)叙甸，我們是通過點(diǎn)擊按鈕后回到了頁面的起始錨點(diǎn)颖医，所以這里需要注意一點(diǎn)，這個錨點(diǎn)必須放在頁面的最頂端蚁署，第三點(diǎn)便脊，我們點(diǎn)擊了按鈕后，按鈕會回到錨點(diǎn)位置光戈，同時按鈕也會慢慢的隱藏起來哪痰。接著我們就來看看吧

//html
<div class="container">
    <div class="header"> 我是頭部</div>
       <div class="content">我是主內(nèi)容，高度是2000px</div>
       <div class="footer">我是在最底部</div>
</div>

當(dāng)頁面加入下面的jQuery代碼后久妆，我們的HTML代碼就會自動加載一個錨點(diǎn)和一個按鈕的元素標(biāo)簽晌杰，看看Firebug中的截圖：

//css
#goToTop {
   position: fixed;
   right: 10%;
   z-index: 9000;
   top: 100%;
   margin-top: -50px;
}

又來到j(luò)Query這一關(guān)鍵一步了，大家可以仔細(xì)看看下面的代碼：

//js
<script type="text/javascript">
    $(function(){
        var goToTopButton = "<div id='goToTop'><a href='#'>點(diǎn)我回到頁面頂部</a></div>";  //定義按鈕標(biāo)簽
        $("div.container").append(goToTopButton); //在container的div最后面加上按鈕標(biāo)簽
        if($(window).scrollTop() < 1) {
            $("#goToTop").hide();  //滾動條距離頂端的距離小于showDistance是隱藏goToTop按鈕
        }
        var scroll_timer;
        var displayed = false;
        var $window = $(window);
        var top = 0;
        $window.scroll(function(){
            window.clearTimeout(scroll_timer);
            scroll_timer = window.setTimeout(function(){
                if($window.scrollTop() <= top) {
                    displayed= false;
                    $("#goToTop").fadeOut(500);
                } else if(displayed == false) { //show if scrolling down
                    displayed = true;
                    $("#goToTop").stop(true,true).show().click(function(){
                        $("#goToTop").fadeOut(500);
                    });
                }
            },100);
        });
    });
</script>