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

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