首页 > 代码库 > 原生js,实现“返回顶部”效果
原生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,实现“返回顶部”效果