每天一遍js -- 回到顶部

回到顶部是我们最经常用到的事件，那么首先我们先来个最简单的回到顶部的代码

//获取回到顶部的元素
var link = document.getElementById('link');
link.onclick = function(){
    //让浏览器的Scroll-top设置为0
    utils.winBox('scrollTop',0);
    //utils方法请参考 [封装一个组件](https://juejin.im/post/6844903607763124231)的文章，我们已经对部分功能基于惰性思想，闭包原理作出封装
}

封装一个组件文章

下面我们对上面的方法做一定的优化

• 当滚动高度大于一屏的高度，在将按钮显示

• 当浏览器向下滚动的时候，我们实时检测浏览器滚动的高度

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);
    }
}();