js返回页面顶部特效
http://www.zhangxinxu.com/study/201104/back-to-top-mootools.html
| <!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" /> | |
| <meta http-equiv="description" content="MooTools下的返回顶部功能的实现 » 张鑫旭-鑫空间-鑫生活" /> | |
| <meta name="description" content="张鑫旭web前端学习实例页面" /> | |
| <meta name="keywords" content="张鑫旭, 张鑫旭-鑫空间-鑫生活, web前端, css, MooTools, javascript, demo页面" /> | |
| <meta name="author" content="张鑫旭, zhangxixnu" /> | |
| <title>MooTools下的返回顶部功能的实现 » 张鑫旭-鑫空间-鑫生活</title> | |
| <link rel="stylesheet" href="../css/demo.css" type="text/css" /> | |
| <link rel="stylesheet" href="../css/hl.css" type="text/css" /> | |
| <style> | |
| .backToTop{display:none; width:18px; line-height:1.2; padding:5px 0; background-color:#000; color:#fff; font-size:12px; text-align:center; position:fixed; _position:absolute; right:10px; bottom:100px; _bottom:"auto"; cursor:pointer; opacity:.6; filter:Alpha(opacity=60);} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <a href="http://www.zhangxinxu.com/" class="logo" title="回到鑫空间-鑫生活首页"> | |
| <img src="http://www.zhangxinxu.com/php/image/zxx_home_logo.png" border="0" /> | |
| </a> | |
| </div> | |
| <div id="main"> | |
| <h1>MooTools下的返回顶部功能的实现实例页面</h1> | |
| <div id="body" class="light"> | |
| <div id="content" class="show"> | |
| <h3>展示</h3> | |
| <div class="article_new"><a href="http://www.zhangxinxu.com/wordpress/?p=1576">回到相关文章 »</a></div> | |
| <div class="demo"> | |
| <img src="http://image.zhangxinxu.com/image/study/s/s512/mm11.jpg" /> | |
| </div> | |
| <h3>代码</h3> | |
| <h5>CSS代码：</h5> | |
| <pre name="code" class="css"> | |
| .backToTop { | |
| display: none; | |
| width: 18px; | |
| line-height: 1.2; | |
| padding: 5px 0; | |
| background-color: #000; | |
| color: #fff; | |
| font-size: 12px; | |
| text-align: center; | |
| position: fixed; | |
| _position: absolute; | |
| right: 10px; | |
| bottom: 100px; | |
| _bottom: "auto"; | |
| cursor: pointer; | |
| opacity: .6; | |
| filter: Alpha(opacity=60); | |
| } | |
| </pre> | |
| <h5>JS代码：</h5> | |
| <pre name="code" class="js"> | |
| (function() { | |
| var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", { | |
| "class": "backToTop", | |
| title: $backToTopTxt | |
| }).set("text", $backToTopTxt).addEvent("click", function() { | |
| var st = document.getScroll().y, speed = st / 6; | |
| var funScroll = function() { | |
| st -= speed; | |
| if (st <= 0) { st = 0; } | |
| window.scrollTo(0, st); | |
| if (st > 0) { setTimeout(funScroll, 20); } | |
| }; | |
| funScroll(); | |
| }).inject(document.body), $backToTopFun = function() { | |
| var st = document.getScroll().y, winh = window.getSize().y; | |
| (st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none"); | |
| //IE6下的定位 | |
| if (!window.XMLHttpRequest) { | |
| $backToTopEle.setStyle("top", st + winh - 166); | |
| } | |
| }; | |
| window.addEvents({ | |
| scroll: $backToTopFun, | |
| domready: $backToTopFun | |
| }); | |
| })(); | |
| </pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script> | |
| <script> | |
| (function() { | |
| var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", { | |
| "class": "backToTop", | |
| title: $backToTopTxt | |
| }).set("text", $backToTopTxt).addEvent("click", function() { | |
| var st = document.getScroll().y, speed = st / 6; | |
| var funScroll = function() { | |
| st -= speed; | |
| if (st <= 0) { st = 0; } | |
| window.scrollTo(0, st); | |
| if (st > 0) { setTimeout(funScroll, 20); } | |
| }; | |
| funScroll(); | |
| }).inject(document.body), $backToTopFun = function() { | |
| var st = document.getScroll().y, winh = window.getSize().y; | |
| (st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none"); | |
| //IE6下的定位 | |
| if (!window.XMLHttpRequest) { | |
| $backToTopEle.setStyle("top", st + winh - 166); | |
| } | |
| }; | |
| window.addEvents({ | |
| scroll: $backToTopFun, | |
| domready: $backToTopFun | |
| }); | |
| })(); | |
| </script> | |
| <script type="text/javascript" src="../js/hl_all.js"></script> | |
| <script type="text/javascript"> | |
| DlHighlight.HELPERS.highlightByName("code", "pre");//<pre>标签添加属性name="code"以及class="LANG" (LANG可以是"js", "css", "xml" and "html") | |
| </script> | |
| <div id="footer"> | |
| Designed & Powerd by <a href="http://www.zhangxinxu.com/">zhangxinxu</a><br /> | |
| Copyright© 张鑫旭-鑫空间-鑫生活<br> | |
| <a href="http://www.miibeian.gov.cn/" target="_blank">鄂ICP备09015569号</a> | |
| </div> | |
| <div id="ad"> | |
| <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "2041257798";google_ad_width = 468;google_ad_height = 60;</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> | |
| <script type="text/javascript"> | |
| var _gaq = _gaq || []; | |
| _gaq.push(['_setAccount', 'UA-11205167-1']); | |
| _gaq.push(['_trackPageview']); | |
| (function() { | |
| var ga = document.createElement('script'); | |
| ga.type = 'text/javascript'; | |
| ga.async = true; | |
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
| })(); | |
| </script> | |
| </div> | |
| </body> | |
| </html> | |