**博主最近在试着写一些简单的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);
}
}
大致代码就是这样了,页面下移,按钮出现的代码只需在上述代码上稍作修改即可,这里不再赘述。