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/p_w_picpath/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://p_w_picpath.zhangxinxu.com/p_w_picpath/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 &amp; 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>