阅读 169

每天一边js -- 回到顶部

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

//获取回到顶部的元素
var link = document.getElementById('link');
link.onclick = function(){
    //让浏览器的Scroll-top设置为0
    utils.winBox('scrollTop',0);
    //utils方法请参考 [封装一个组件](https://juejin.cn/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);
    }
}();

复制代码
文章分类
前端
文章标签