在说回到顶部的小例子之前,不得不提一下scrollTop的兼容性,因为如果不加以注意的话,很有可能代码写的没问题,效果却出不来,控制台也不报错,急死个人啊 ~
1、Chrome、Firefox、Opera浏览器不支持document.body.scrollTop,Safari浏览器支持。
2、Chrome、Firefox、Opera浏览器都支持document.documentElement.scrollTop,Safari不支持。
3、以上两条注意区分哦,我可是一个个浏览器验证的呢,哈哈~
4、兼容的写法:
var kind1 = document.body.scrollTop || document.documentElement.scrollTop;
var kind2 = document.body.scrollTop + document.documentElement.scrollTop;
OK,言归正传,我们开始“回到顶部”,哈哈O(∩_∩)O~
大致思路解说:
当页面可以滚动的时候会出现滚动条,而看过我前一篇博客的小伙伴们都知道,scrollTop是滚动上去的部分,所以这里判断当scrollTop>0的时候,我们事先定义好但是隐藏了的“回到顶部”的div就会出现,然后点击这个设置了循环定时器的div,就会在一定的时间内按一定的速度,回到顶部。
实例代码(这里我只使用了document.documentELement.scrollTop哦):
CSS代码部分:
<style type="text/css">
body{
position: relative;
height: 2000px;
}
#div{
width: 100px;
height: 100px;
background-color: lightgray;
line-height: 100px;
text-align: center;
position: fixed;
bottom: 0px;
right: 0px;
display: none;
}
</style>
<body>
<div id="div">回到顶部</div>
</body>
JS代码部分:
<script type="text/javascript">
var div = document.getElementById('div');
var timer;
document.body.onscroll=function(){
if(document.documentElement.scrollTop>0){
div.style.display = "block";
}else{
div.style.display = "none";
}
}
div.onclick=function(){
clearInterval(timer);
timer = setInterval(function(){
console.log(123);
document.documentElement.scrollTop-=190;
if(document.documentElement.scrollTop<=0){
clearInterval(timer);
}
},20);
}
</script>
想要看效果的小伙伴,可以自行编写查看哦,我就不上传了,Fighting!!!