快捷導(dǎo)航

仿新浪微博返回頂部的jquery實現(xiàn)代碼

更新時間：2012年10月01日 20:23:29 作者：

在web頁面中，如果頁面較高，為了方便用戶快速地返回頂部，都會添加一個返回頂部按鈕

一、引言

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

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

二、jQuery下的返回頂部功能

您可以狠狠地點擊這里：jQuery下的返回頂部demo

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

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

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

無論是這里的jQuery實現(xiàn)還是MooTools實現(xiàn)，下面的CSS代碼都是一致的，如下：
CSS代碼：

復(fù)制代碼代碼如下:

 
.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代碼：

復(fù)制代碼代碼如下:

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

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

您可以狠狠地點擊這里：MooTools下的返回頂部demo

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

代碼部分。CSS代碼完全同上。JS代碼如下：

復(fù)制代碼代碼如下:

 
(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代碼中就輕松實現(xiàn)效果啦。

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

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

四、結(jié)語
其實實現(xiàn)頁面返回頂部效果最簡單的就是a標簽然后href屬性值直接就是#錨點就ok了。但是這種方法會在url地址后面產(chǎn)生一個”#”。關(guān)于錨點相關(guān)的內(nèi)容您可以參見我之前的“關(guān)于錨點跳轉(zhuǎn)及jQuery下相關(guān)操作與插件”一文。

您可能感興趣的文章: