以前做滚动监听都是用jQuery来实现这样的效果,虽然用jquery实现起来很方便,但是还是想用原生js来实现一下。
HTML代码:
<div class="uptop" id="uptop">
<img src="images/up.png" id="to-top">//这里用了一个向上的箭头图片,用于表明返回顶部
</div>
CSS代码:
.uptop{
position:fixed;//位置固定
bottom:-50px;//距离底部-50px,为了使一开始不显示
right:10px;//距离右边10px
width:50px;
z-index:99;//为了使此部分位于整个页面的最上部分,不会被覆盖
-webkit-transition:all .5s;//设置改变bottom时的动画效果
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
.uptop img{
width:70%;
cursor:pointer;
}
JS代码:
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop; //获取距离页面顶部的距离
var uptop = document.getElementById( "uptop" ); //获取div元素
if( t >= 300 ) { //当距离顶部超过300px时
uptop.style.bottom=30+'px';//使div距离底部30px,也就是向上出现
} else { //如果距离顶部小于300px
uptop.style.bottom=-50+'px';//使div向下隐藏
}
}
var top=document.getElementById("to-top");//获取图片元素
var timer=null;
top.onclick = function(){ //点击图片时触发点击事件
timer=setInterval(function(){ //设置一个计时器
var ct = document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离
ct-=10;
if(ct>0){//如果与顶部的距离大于零
window.scrollTo(0,ct);//向上移动10px
}
else{//如果距离小于等于零
window.scrollTo(0,0);//移动到顶部
clearInterval(timer);//清除计时器
}
},10);//隔10ms执行一次前面的function,展现一种平滑滑动效果
}
通过这样一段js代码就能够实现当页面从顶部向下滑动超过300px时,返回顶部的图片出现,并且点击图片,页面平滑的移动到页面顶部。