纯JS实现页面滚动至顶部并自动显示或隐藏

**博主最近在试着写一些简单的JS组件，一方面锻炼自己的JS功底，另一方面也为将来JS组件复用打好基础**

我们在浏览网页时常常看到这样的JS组件

    这个是CSDN博客的返回顶部按钮，这种按钮是瞬间回到页面顶部，到页面顶部后的消失也是立马消失，而我们今天要写的是逐步返回至顶部，并逐步消失，在页面往下拉后，按钮也是逐步出现。
    其实大致逻辑很简单，就是点击之后通过 setInterval 和 scrollTop 逐步的减少滚动条的Top距离，关键部分代码如下。

var set = setInterval(function(){
                var toTop = document.documentElement.scrollTop||document.body.scrollTop;
                if(toTop<=0)
                    clearInterval(set);
                document.documentElement.scrollTop=toTop-50;
            },1);

    这里有个要注意的地方就是 toTop 在不同浏览器的获取方法不同。
    然后我们要做的就是当页面回到顶部时，按钮能逐步消失，在离开顶部后也能逐步显现。
    大致逻辑也是利用 setInterval 函数，这里有两个关键点。
    （1）博主采用了判断滚动条的Top距离是否小于100来判断是否到达顶部，以此来触发按钮消失事件，那么这里就有一个问题，如果用户在到达顶部后，又移动了滚动条，而且还是在100距离以内一直移动，就会一直触发按钮消失的事件，导致多线程互相影响，产生互斥，所以这里博主采用了信号量的防止互斥的办法，isuse，若isuse==false，则说明没有线程在操作按钮，允许线程进入，并在线程进入后，立马设置 isuse=true，防止其他线程进入。
    （2）在执行按钮消失事件的时候，博主是用按钮元素逐渐增大他与父元素之间的距离，也就是逐步增大 top 属性以实现按钮向下逐步消失，那么我们就需要实时获取 top 的大小，由于博主才用外部CSS，所以这里采用了计算样式，window.getComputedStyle。
    关键部分代码如下

if(toTop < 100){
                if(isuse===true) //如果资源已经被占用，则直接回退
                    return;
                else{
                    var rollDown = ele.parentNode;
                    var currentTop = window.getComputedStyle(rollDown, null)['top'];
                    if(currentTop.replace('px', '') >= 100)
                        return;
                    var set = setInterval(function(){
                        var currentTop = window.getComputedStyle(rollDown, null)['top'];
                        if(currentTop.replace('px', '') >= 100){
                            clearInterval(set);
                            isuse = false;
                        }
                        else{
                            rollDown.style.top = parseInt(currentTop.replace('px', ''), 10) + 3 + 'px';
                            isuse = true;
                        }
                    }, 1);
                }
            }

    大致代码就是这样了，页面下移，按钮出现的代码只需在上述代码上稍作修改即可，这里不再赘述。