本文章著作權(quán)歸沒夢想的咸魚丶所有，轉(zhuǎn)載須說明來源

產(chǎn)生需求

• 當(dāng)頁面過長的時候，我們回到頁面頂部如果還是拖拉滾動條那就有點(diǎn)太麻煩了，所以這個時候我就需要一個一鍵回到頂部的功能。
• 有了這個想法之后，那我們就需要明確這個功能jquery能實(shí)現(xiàn)它嗎？想了想jquery不是有scrollTop這個方法可以控制滾動條嗎？所以答案那是肯定的，以下就是我們實(shí)施的過程 。
  • 明確開發(fā)思路
  • 開始我們要判斷下拉到什么位置時需要把這個時候把goTop鍵展現(xiàn)出來
  • 接著當(dāng)我們點(diǎn)擊回到頂部之后，這個鍵肯定是需要隱藏的（顯得智能點(diǎn)）
  • 這里面涉及到2個事件需要我們監(jiān)聽（滾動條的位置以及goTop鍵的點(diǎn)擊）
  • 通過思路我們知道肯定是要用到scrollTop() show() hide()這3個方法

開始擼代碼

1. 把這個鍵插入到HTML中，為什么不直接在HTML中寫呢？主要我們既然是使用js來做這個事，那最好就一切都用js代碼來操作，不互相耦合，以后即使我們要修改那也只需要改js代碼就好了，不關(guān)HTML任何事。

    var $goTop=$('<div id="to-top">回到頂部</div>');    
        $('body').append($goTop)

2. 監(jiān)聽事件，我設(shè)置的是當(dāng)滾動條滾動到超過100之后就展示滾動條，否則都是出于隱藏狀態(tài)。另外當(dāng)點(diǎn)擊goTop鍵之后立馬把滾動條設(shè)置為0回到最頂部。

$(window).on('scroll',function(){
            var  $scrollTop=$('body').scrollTop();
            if ($scrollTop>100) {
                $('#to-top').show();
            }else{
                $('#to-top').hide();
            }
        })
        $('#to-top').on('click',function(){
            $(window).scrollTop(0);
        })

3. 另外插入goTop的css需要自己設(shè)置樣式，畢竟不同頁面樣式肯定也會有不同

優(yōu)化優(yōu)化

簡單的功能我們是做出來了，但還有一些bug，而且這樣功能其實(shí)我們只要做一次就夠了 ，以后直接拿來用。所以還需要封裝下。

var GoTop={
    init:function(){
        if ($('#to-top').length>0) { return }//如果已經(jīng)插入過元素一次就不需要做第二次了
        var $goTop=$('<div id="to-top">回到頂部</div>');
        $('body').append($goTop); 
        this.$goTop=$goTop; 
              //把這個節(jié)點(diǎn)賦值為對象屬性，以后修改的時候只需要修改這部分就好了
        this.bind();
    },
    bind:function(){
        var me=this;
        $(window).on('scroll',function(){
            var  $scrollTop=$('body').scrollTop();
            if ($scrollTop>100) {
                me.$goTop.show(); //這里this已經(jīng)發(fā)生了改變，所以用變量me保存了下
            }else{
                me.$goTop.hide();
            }
        })
        this.$goTop.on('click',function(){
            $(window).scrollTop(0);
        })
    }
}
  
GoTop.init(); 每次只需要調(diào)用這個方法就好了,而且即使執(zhí)行多次也只需要插入一個按鈕