JavaScript之回到顶部

最新推荐文章于 2022-11-01 19:41:37 发布

phrtre

最新推荐文章于 2022-11-01 19:41:37 发布

阅读量192

点赞数

分类专栏：小白微信

本文链接：https://blog.csdn.net/phrtre/article/details/73848749

版权

小白微信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

回到顶部

*{margin: auto;}

.one{width: 1000px;height:660px;background: red;}
.two{width: 1000px;height:660px;background: blue;}
.hree{width: 1000px;height:660px;background: green;}
.four{width: 1000px;height:660px;background: pink;}
.btn{background:url(images/top_bg.png) no-repeat top left;width: 40px;height: 40px;position:fixed;bottom: 10px;right:95px;display: none;}
.btn:hover{background:url(images/top_bg.png) no-repeat 0 -39px;}

window.οnlοad=function(){ var obtn = document.getElementById('btn'); var timer = null; var clientHeight=document.documentElement.clientHeight;//clientHeight是内容可视区域的高度 var isTop = true; //onscroll 事件在元素滚动条在滚动时触发 window.οnscrοll=function(){ var roTop = document.documentElement.scrollTop||document.body.scrollTop;//导航条到顶端距离 if(roTop>=clientHeight){ obtn.style.display='block'; }else{ obtn.style.display='none'; } if (!isTop){ clearInterval(timer); } isTop = false; }; obtn.οnclick=function(){ //定时器 timer=setInterval(function(){ var roTop = document.documentElement.scrollTop||document.body.scrollTop;//导航条到顶端距离 var speech = Math.floor(-roTop/6); document.documentElement.scrollTop=document.body.scrollTop = roTop+speech; console.log(roTop+speech); isTop = true; console.log(roTop+speech) if (roTop==0){ clearInterval(timer); } },60); }; }