原生js,实现“返回顶部”效果
Posted 奔跑的小溪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js,实现“返回顶部”效果相关的知识,希望对你有一定的参考价值。
html:
<span>^</span>
css
body{
height: 3000px;
}
span{
display: block;
position: fixed;
bottom: 20px;
right: 10px;
font-size: 60px;
}
js:
<script>
var ospan=document.getElementsByTagName(‘span‘)[0];
var sp=0;
function scrollup(){
if(sp>0){
sp-=100;
document.body.scrollTop = sp;
document.documentElement.scrollTop=sp;
setTimeout(scrollup,20);//用setTimeout模式setInterval的效果
}else{
document.body.scrollTop = 0;
document.documentElement.scrollTop=0;
}
}
ospan.onclick=function(){
sp=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;//兼容浏览器,获得到顶部的距离
setTimeout(scrollup,20);
}
</script>
以上是关于原生js,实现“返回顶部”效果的主要内容,如果未能解决你的问题,请参考以下文章