网页返回顶部js特效

最新推荐文章于 2023-12-28 12:59:46 发布

EleanPing

最新推荐文章于 2023-12-28 12:59:46 发布

阅读量418

点赞数

分类专栏： web前端开发-js特效文章标签： HTML JavaScript

本文链接：https://blog.csdn.net/u010433173/article/details/8867307

版权

web前端开发-js特效专栏收录该内容

5 篇文章 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>
</head>
<style type="text/css">
*{margin:0;padding:0;}
#gotopbtn{width:58px;height:58px;background:url(images/db_03.jpg);position:fixed; bottom:50px;right:120px;display:none;cursor:pointer;}
*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}/*背景图片不会移动*/
*html #gotopbtn /* IE6 头部固定 */{position:absolute;margin:500px 0 0 0; top:expression(eval(document.documentElement.scrollTop));}
</style>

<body >
<div style=" width:980px; height:3700px; background:#FF0000; margin:0 auto; text-align:center; font-size:36px; font-weight:700;">
顶部
</div>

<div id="gotopbtn"> </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*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>