仿淘宝网超过屏幕高度才显示返回顶部按钮

作者:sky 点击:125 评论:0 发布时间:周四, 11/03/2011 - 16:34 所属分类:综合实例

网站常用返回顶部效果，只有屏幕滚动超过浏览器高度时，才显示返回顶部按钮。

<!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=gb2312"> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,全力打造一流网页特效站" /> <title>站长特效仿淘宝网超过屏幕高度才显示返回顶部按钮站长特效网</title> <style type="text/css"> .zzjs_net{position:relative;width:980px;height:4800px;background-color: #999999;margin:0 auto;padding-top:220px;} #www_zzjs_net{position:absolute;width:20px;display:none;height:59px;top:0px;right:-30px;} </style> <script language="javascript" src="/img/jquery_zzjs.js"></script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <span style="color:#FF0000">需要加载js文件，请刷新页面后看效果！</span><br /> <div class="zzjs_net"> 站长特效网，以质量为核心，以实用为目的，打造中国一流网页特效资源站！ <div id="www_zzjs_net"><a href="#top"><img src="/img/20111103_top_zzjs.gif" border="0"></a></div> </div> <script language="javascript"> (function(){ var n=0; var obj=document.getElementById("www_zzjs_net"); if(!obj){return false;} var x=0; var fe=$("#www_zzjs_net"); window.onscroll=function(){ obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px'; x=(document.body.scrollTop||document.documentElement.scrollTop)+n; if(x==0){fe.fadeOut().hide()}else{fe.fadeIn().show()}; }; window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px'}; })();//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> </body> </html>

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

顶一下

(1)

100%

踩一下

(0)

标签: