仿新浪微博返回頂部的jquery實(shí)現(xiàn)代碼
更新時(shí)間:2012年10月01日 20:23:29 作者:
在web頁(yè)面中,如果頁(yè)面較高,為了方便用戶快速地返回頂部,都會(huì)添加一個(gè)返回頂部按鈕
一、引言
在web頁(yè)面中,如果頁(yè)面較高,為了方便用戶快速地返回頂部,都會(huì)添加一個(gè)返回頂部按鈕。
其中淘寶網(wǎng)的是要滾動(dòng)條的滾動(dòng)距離大于某一段距離才顯示返回頂部按鈕;人人網(wǎng)的返回頂部直接在底部的工具條上;新浪微博的返回頂部在滾動(dòng)高度大于0的時(shí)候顯示,且返回頂部的效果是平滑動(dòng)畫效果。本文的實(shí)現(xiàn)就是類似于新浪微博的這種效果。
二、jQuery下的返回頂部功能
您可以狠狠地點(diǎn)擊這里:jQuery下的返回頂部demo
可以看到,如果頁(yè)面有滾動(dòng)高度,右下角就會(huì)有一個(gè)含有“返回頂部”字樣的黑色背景半透明的小條條,如下圖所示:
點(diǎn)擊這里“返回頂部”字樣的按鈕后,頁(yè)面就像是抹了潤(rùn)滑劑一樣,倏地一聲就滑到頂部了,同時(shí),該點(diǎn)擊按鈕也玩起了躲貓貓 – 不見了。
實(shí)現(xiàn)的原理嘛,恩……估計(jì)鮮有人關(guān)心,所以我也懶得浪費(fèi)口水了,直接上代碼。
無(wú)論是這里的jQuery實(shí)現(xiàn)還是MooTools實(shí)現(xiàn),下面的CSS代碼都是一致的,如下:
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代碼:
(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下返回頂部功能實(shí)現(xiàn)
您可以狠狠地點(diǎn)擊這里:MooTools下的返回頂部demo
demo頁(yè)面的效果與上面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頁(yè)面中的美女圖片作用是撐開頁(yè)面高度使產(chǎn)生滾動(dòng)條。
四、結(jié)語(yǔ)
其實(shí)實(shí)現(xiàn)頁(yè)面返回頂部效果最簡(jiǎn)單的就是a標(biāo)簽然后href屬性值直接就是#錨點(diǎn)就ok了。但是這種方法會(huì)在url地址后面產(chǎn)生一個(gè)”#”。關(guān)于錨點(diǎn)相關(guān)的內(nèi)容您可以參見我之前的“關(guān)于錨點(diǎn)跳轉(zhuǎn)及jQuery下相關(guān)操作與插件”一文。
在web頁(yè)面中,如果頁(yè)面較高,為了方便用戶快速地返回頂部,都會(huì)添加一個(gè)返回頂部按鈕。
其中淘寶網(wǎng)的是要滾動(dòng)條的滾動(dòng)距離大于某一段距離才顯示返回頂部按鈕;人人網(wǎng)的返回頂部直接在底部的工具條上;新浪微博的返回頂部在滾動(dòng)高度大于0的時(shí)候顯示,且返回頂部的效果是平滑動(dòng)畫效果。本文的實(shí)現(xiàn)就是類似于新浪微博的這種效果。
二、jQuery下的返回頂部功能
您可以狠狠地點(diǎn)擊這里:jQuery下的返回頂部demo
可以看到,如果頁(yè)面有滾動(dòng)高度,右下角就會(huì)有一個(gè)含有“返回頂部”字樣的黑色背景半透明的小條條,如下圖所示:
點(diǎn)擊這里“返回頂部”字樣的按鈕后,頁(yè)面就像是抹了潤(rùn)滑劑一樣,倏地一聲就滑到頂部了,同時(shí),該點(diǎn)擊按鈕也玩起了躲貓貓 – 不見了。
實(shí)現(xiàn)的原理嘛,恩……估計(jì)鮮有人關(guān)心,所以我也懶得浪費(fèi)口水了,直接上代碼。
無(wú)論是這里的jQuery實(shí)現(xiàn)還是MooTools實(shí)現(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下返回頂部功能實(shí)現(xiàn)
您可以狠狠地點(diǎn)擊這里:MooTools下的返回頂部demo
demo頁(yè)面的效果與上面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代碼中就輕松實(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頁(yè)面中的美女圖片作用是撐開頁(yè)面高度使產(chǎn)生滾動(dòng)條。
四、結(jié)語(yǔ)
其實(shí)實(shí)現(xiàn)頁(yè)面返回頂部效果最簡(jiǎn)單的就是a標(biāo)簽然后href屬性值直接就是#錨點(diǎn)就ok了。但是這種方法會(huì)在url地址后面產(chǎn)生一個(gè)”#”。關(guān)于錨點(diǎn)相關(guān)的內(nèi)容您可以參見我之前的“關(guān)于錨點(diǎn)跳轉(zhuǎn)及jQuery下相關(guān)操作與插件”一文。
您可能感興趣的文章:
- js+JQuery返回頂部功能如何實(shí)現(xiàn)
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
- 基于jquery的返回頂部效果(兼容IE6)
- JQuery 動(dòng)畫卷頁(yè) 返回頂部 動(dòng)畫特效(兼容Chrome)
- jQuery中頁(yè)面返回頂部的方法總結(jié)
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕
- 使用jQuery實(shí)現(xiàn)返回頂部
- jQuery實(shí)現(xiàn)小火箭返回頂部特效
相關(guān)文章
javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)高度和寬度
這篇文章主要介紹了javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度,需要的朋友可以參考下2014-07-07在頁(yè)面上用action傳遞參數(shù)到后臺(tái)出現(xiàn)亂碼的解決方法
本篇文章主要是對(duì)在頁(yè)面上用action傳遞參數(shù)到后臺(tái)出現(xiàn)亂碼的解決方法進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2013-12-12Jquery動(dòng)態(tài)替換div內(nèi)容及動(dòng)態(tài)展示的方法
這篇文章主要介紹了Jquery動(dòng)態(tài)替換div內(nèi)容及動(dòng)態(tài)展示的方法,動(dòng)態(tài)替換div內(nèi)容并展示的使用技巧與注意事項(xiàng),需要的朋友可以參考下2015-01-01Html5的placeholder屬性(IE兼容)實(shí)現(xiàn)代碼
Placeholder是HTML5新增的另一個(gè)屬性,當(dāng)input或者textarea設(shè)置了該屬性后,該值的內(nèi)容將作為灰字提示顯示在文本框中,當(dāng)文本框獲得焦點(diǎn)時(shí),提示文字消失。以前要實(shí)現(xiàn)這效果都是用JavaScript來(lái)控制才能實(shí)現(xiàn) , firefox、google chrome等表示對(duì)其支持 , 唯獨(dú)IE不支持2014-08-08