一、引言

　　在web頁面中，如果頁面較高，為了方便用戶快速地返回頂部，都會(huì)添加一個(gè)返回頂部按鈕。例如：

　　其中淘寶網(wǎng)的是要滾動(dòng)條的滾動(dòng)距離大于某一段距離才顯示返回頂部按鈕；人人網(wǎng)的返回頂部直接在底部的工具條上；新浪微博的返回頂部在滾動(dòng)高度大于0的時(shí)候顯示，且返回頂部的效果是平滑動(dòng)畫效果。本文的實(shí)現(xiàn)就是類似于新浪微博的這種效果。//zxx:新浪微博今天啟用新域名weibo.com了

二、jQuery下的返回頂部功能

　　可以看到，如果頁面有滾動(dòng)高度，右下角就會(huì)有一個(gè)含有返回頂部字樣的黑色背景半透明的小條條，如下圖所示：

　　點(diǎn)擊這里返回頂部字樣的按鈕后，頁面就像是抹了潤(rùn)滑劑一樣，倏地一聲就滑到頂部了，同時(shí)，該點(diǎn)擊按鈕也玩起了躲貓貓 – 不見了。

　　實(shí)現(xiàn)的原理嘛，恩……估計(jì)鮮有人關(guān)心，所以我也懶得浪費(fèi)口水了，直接上代碼。

　　無論是這里的jQuery實(shí)現(xiàn)還是MooTools實(shí)現(xiàn)，下面的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);
}

js相關(guān)代碼如下：

(function() {
var $backToTopTxt = "返回頂部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();

　　寥寥十幾行代碼就實(shí)現(xiàn)了全部的交互細(xì)節(jié)了。您可以將上面代碼直接拷貝到您的JavaScript文件中，頁面就有效果啦！對(duì)了，請(qǐng)使用jQuery 1.4+。

三、MooTools下返回頂部功能實(shí)現(xiàn)

　　demo頁面的效果與上面jQuery demo下效果基本一致。

　　代碼部分。CSS代碼完全同上。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
});
})();

　　直接拷貝上面的代碼在您的JS代碼中就輕松實(shí)現(xiàn)效果啦。

　　MooTools的動(dòng)畫方法Fx不支持滾動(dòng)，要實(shí)現(xiàn)滾動(dòng)條的平滑滾動(dòng)效果需要使用Fx.Scroll插件。但是，顯然，  這里的簡(jiǎn)單功能沒有必要再使用額外的插件，所以直接設(shè)置了個(gè)定時(shí)器實(shí)現(xiàn)了平滑滾動(dòng)效果。

　　注：demo頁面中的美女圖片作用是撐開頁面高度使產(chǎn)生滾動(dòng)條。

四、結(jié)語

　　其實(shí)實(shí)現(xiàn)頁面返回頂部效果最簡(jiǎn)單的就是a標(biāo)簽然后href屬性值直接就是#錨點(diǎn)就ok了。但是這種方法會(huì)在url地址后面產(chǎn)生一個(gè)#。

　　本文算是個(gè)實(shí)用小技術(shù)，內(nèi)容不多，希望能對(duì)您的學(xué)習(xí)有所幫助。感謝閱讀。