仿新浪微博回頂端的jquery實作碼_jquery

一、引言

在web頁面中，如果頁面較高，為了方便使用者快速地回到頂部，都會新增一個回到頂部按鈕。

其中淘寶網的是要滾動條的滾動距離大於某一段距離才顯示返回頂部按鈕；人人網的返回頂部直接在底部的工具條上；新浪微博的返回頂部在滾動高度大於0的時候顯示，且回到頂部的效果是平滑動畫效果。本文的實現就是類似新浪微博的這種效果。

二、jQuery下的回頂端功能

您可以狠狠地點選這裡：jQuery下的回頂端demo

可以看到，如果頁面有滾動高度，右下角就會有一個含有“返回頂部”字樣的黑色背景半透明的小條條，如下圖所示：

點擊這裡“返回頂部「字樣的按鈕後，頁面就像是抹了潤滑劑一樣，倏地一聲就滑到頂部了，同時，該點擊按鈕也玩起了躲貓貓– 不見了。

實現的原理嘛，恩……估計鮮有人關心，所以我也懶得浪費口水了，直接上代碼。

無論是這裡的jQuery實作還是MooTools實現，下面的CSS程式碼都是一致的，如下：
CSS程式碼：

複製程式碼 程式碼如下:

.backToTop {
display: none;
width: 18px;
line-height: 1.2 background-color: #000;
color: #ff;
font-size: 12px;
text-align: center;
position: fixed;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: pointer;
opacity: .6;

filter::o opacity=60);
}

JS程式碼： 複製程式碼

複製程式碼



複製碼


(function() {
var $backToTopTxt = "回頂端", $backToTopEle = $('

').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(); });
})();




三、MooTools下回傳頂部功能實現

您可以狠狠地點擊這裡：MooToolssools下的回頂端demo demo頁面的效果與上面jQuery demo下效果基本上一致。 程式碼部分。 CSS程式碼完全同上。 JS程式碼如下：

複製程式碼


程式碼如下:


(function() {


(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 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程式碼中就輕鬆實現效果啦。

MooTools的動畫方法Fx不支援捲動，要實現捲軸的平滑滾動效果需要使用Fx.Scroll插件。但是，顯然， 這裡的簡單功能沒有必要再使用額外的插件，所以直接設定了個定時器實現了平滑滾動效果。

註：demo頁面中的美女圖片作用是撐開頁面高度使產生捲軸。

四、結語
其實實作頁面回傳頂部效果最簡單的就是a標籤然後href屬性值直接就是#錨點就ok了。但是這種方法會在url位址後面產生一個”#”。關於錨點相關的內容您可以參考我之前的「關於錨點跳轉及jQuery下相關操作與插件」一文。