<p>返回顶部的js实现(jQuery/MooTools)</p>
<p>一、、jQuery下的返回顶部功能</p>
<p>您可以狠狠地点击这里：jQuery下的返回顶部demo</p>
<p>可以看到，如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条，如下图所示：</p>
<p><br />
点击这里“返回顶部”字样的按钮后，页面就像是抹了润滑剂一样，倏地一声就滑到顶部了，同时，该点击按钮也玩起了躲猫猫 – 不见了。</p>
<p>实现的原理嘛，恩……估计鲜有人关心，所以我也懒得浪费口水了，直接上代码。</p>
<p>无论是这里的jQuery实现还是MooTools实现，下面的CSS代码都是一致的，如下：</p>
<p>.backToTop {<br />
display: none;<br />
width: 18px;<br />
line-height: 1.2;<br />
padding: 5px 0;<br />
background-color: #000;<br />
color: #fff;<br />
font-size: 12px;<br />
text-align: center;<br />
position: fixed;<br />
_position: absolute;<br />
right: 10px;<br />
bottom: 100px;<br />
_bottom: "auto";<br />
cursor: pointer;<br />
opacity: .6;<br />
filter: Alpha(opacity=60);<br />
}<br />
js相关代码如下：</p>
<p>(function() {<br />
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))<br />
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {<br />
$("html, body").animate({ scrollTop: 0 }, 120);<br />
}), $backToTopFun = function() {<br />
var st = $(document).scrollTop(), winh = $(window).height();<br />
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();<br />
//IE6下的定位<br />
if (!window.XMLHttpRequest) {<br />
$backToTopEle.css("top", st + winh - 166);<br />
}<br />
};<br />
$(window).bind("scroll", $backToTopFun);<br />
$(function() { $backToTopFun(); });<br />
})();</p>
<p><br />
</p>
<p>二、MooTools下返回顶部功能实现</p>
<p>您可以狠狠地点击这里：MooTools下的返回顶部demo</p>
<p>demo页面的效果与上面jQuery demo下效果基本一致。</p>
<p>代码部分。CSS代码完全同上。JS代码如下：</p>
<p>(function() {<br />
var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", {<br />
"class": "backToTop",<br />
title: $backToTopTxt<br />
}).set("text", $backToTopTxt).addEvent("click", function() {<br />
var st = document.getScroll().y, speed = st / 6;<br />
var funScroll = function() {<br />
st -= speed;<br />
if (st <= 0) { st = 0; }<br />
window.scrollTo(0, st);<br />
if (st > 0) { setTimeout(funScroll, 20); }<br />
};<br />
funScroll();<br />
}).inject(document.body), $backToTopFun = function() {<br />
var st = document.getScroll().y, winh = window.getSize().y;<br />
(st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");<br />
//IE6下的定位<br />
if (!window.XMLHttpRequest) {<br />
$backToTopEle.setStyle("top", st + winh - 166);<br />
}<br />
};<br />
window.addEvents({<br />
scroll: $backToTopFun,<br />
domready: $backToTopFun<br />
});<br />
})();<br />
直接拷贝上面的代码在您的JS代码中就轻松实现效果啦。<br />
MooTools的动画方法Fx不支持滚动，要实现滚动条的平滑滚动效果需要使用Fx.Scroll插件。但是，显然， 这里的简单功能没有必要再使用额外的插件，所以直接设置了个定时器实现了平滑滚动效果。<br />
注：demo页面中的美女图片作用是撑开页面高度使产生滚动条。</p>