网页返回顶部

最新推荐文章于 2022-04-20 20:40:29 发布

m13666368773

最新推荐文章于 2022-04-20 20:40:29 发布

阅读量1.2k

点赞数

分类专栏： html页面文章标签： function xhtml class html ie

本文链接：https://blog.csdn.net/m13666368773/article/details/6960133

版权

html页面专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部按钮</title>

<style type="text/css">
body{
font:12px Verdana, Geneva, sans-serif;
line-height:1.2;
text-align:center;
margin:0px;
}
#gotopbtn {
width:0px;
height:0px;
background:#fff;
position:fixed;
bottom:70px;
right:20px;
display:none;
cursor:pointer;
font-size:14px;
line-height:30px;
border:1px solid #aaa;
}
.main{
width:100%;
background:#ccc;
height:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="main">
<img src="/jscss/demoimg/site.gif" ><br>
</div>
<div id="gotopbtn"><img src='top.gif'></img></div>
<script type="text/javascript">
backTop=function (btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
window.οnscrοll=set;
btn.οnclick=function (){
  btn.style.display="none";
  window.οnscrοll=null;
  this.timer=setInterval(function(){
   d.scrollTop-=Math.ceil(d.scrollTop*0.1);
   if(d.scrollTop==0) clearInterval(btn.timer,window.οnscrοll=set);
  },10);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
backTop('gotopbtn');
</script>
</body>
</html>