每天一邊js -- 回到頂部

回到頂部是我們蕞經常用到的事件，那麼首先我們先來個最簡單的互道頂部的程式碼

//獲取回到頂部的元素
var link = document.getElementById('link');
link.onclick = function(){
    //讓瀏覽器的Scroll-top設定為0
    utils.winBox('scrollTop',0);
    //utils方法請參考 [封裝一個元件](https://juejin.im/post/5aff7a0ff265da0b75285fb6)的文章，我們已經對部分功能基於惰性思想，閉包原理作出封裝
}
複製程式碼

封裝一個元件文章

下面我們對上面的方法做一定的優化

• 當滾動高度大於一屏的高度，在將按鈕顯示

• 當瀏覽器向下滾動的時候，我們實時檢測瀏覽器滾動的高度

1. 滾輪控制 或者手動拖動滾動條

2. 鍵盤按鍵控制

3. 使用js程式碼控制

   ...

不管通過什麼方式控制都會觸發onscroll事件

//css
#link {display : none}

//js
~function(){
    //獲取當前蜷曲高度，和一螢幕高度
    window.onscroll = function(){
        var curTop = utils.winBox('scrollTop'),
            curHeight =  utils.winBox('clienthright');
        //已經蜷曲的高度 > 一螢幕高度，顯示按鈕
       utils.css(link,'display', curTop > curHeight ?  'block' :'none') //三元運算子  a ? true :false;
    }
    link.onclick = function(){
        utils.winBox('scrollTop',0);
    }
}();

複製程式碼