top按钮,固定窗口 Published by 脑袋 on 2010 年 06 月 28 日 <html> <head> <!--[if lt IE 7]> <style type="text/css"> #gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 350));} </style> <![endif]--> <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> 提示：您可以先修改部分代码再运行 More from my sitejQuery技巧总结[一]再论call和applyjavascript不支持重载阻止事件冒泡和浏览器的默认行为Ext中的get,getDom,getCmp,getBody,getDoc的区别javascript实现节点可拖动的树 相关 分类目录： 历史数据 标签：javascript, top, 按钮
![jQuery技巧总结[一]](https://i0.wp.com/ifelsend.com/blog/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/29.jpg?resize=150%2C150)
