top按钮,固定窗口

<html> <head>  <style type="text/css"> #gotopbtn { width:100px; height:30px; background:#fff; position:fixed; bottom:0px; right:50px; display:none; cursor:pointer; font-size:14px; line-height:30px; border:1px solid #fff; text-align:center; padding:2px; } #gotopbtn2 { width:500px; height:30px; background:#fff; position:fixed; bottom:0px; right:150px; /*display:none; */ cursor:pointer; font-size:14px; line-height:30px; border:1px solid #f00; text-align:center; padding:2px; } #gotopbtn3 { width:500px; height:30px; background:#fff; position:fixed; /*bottom:0px;*/ top:0px; right:150px; /*display:none; */ cursor:pointer; font-size:14px; line-height:30px; border:1px solid #f00; text-align:center; padding:2px; z-index:99999; } #gotopbtn4 { height:500px; width:30px; background:#fff; position:fixed; /*bottom:0px;*/ top:0px; left:0px; /*display:none; */ cursor:pointer; font-size:14px; line-height:30px; border:1px solid #f00; text-align:center; padding:2px; z-index:99999; } #gotopbtn5 { height:500px; width:30px; background:#fff; position:fixed; /*bottom:0px;*/ top:0px; right:0px; /*display:none; */ cursor:pointer; font-size:14px; line-height:30px; border:1px solid #f00; text-align:center; padding:2px; z-index:99999; } </style> </head> <body> <img src="" width="600" height="1000" /> <div id="gotopbtn">回到顶部 <img src="./wp-content/themes/stheme/images/up.png" /></div> <script type="text/javascript"> backTop=function (btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; window.onscroll=set; btn.onclick=function (){ btn.style.display="none"; window.onscroll=null; this.timer=setInterval(function(){ d.scrollTop-=Math.ceil(d.scrollTop*0.1); if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=d.scrollTop?'block':"none"} }; backTop('gotopbtn'); </script> <div id="gotopbtn2"> Email Rss</div> <div id="gotopbtn3"> Top Email Rss</div> <div id="gotopbtn4"> left Email Rss</div> <div id="gotopbtn5"> right Email Rss</div> </body></html>

提示：您可以先修改部分代码再运行

脑袋博客

IfElseNd.com记录生活点滴

更多推荐

发表评论取消回复

更多推荐

发表评论 取消回复

发表评论取消回复