脚本宝典收集整理的这篇文章主要介绍了js實例教程-仿新浪微博返回頂部的jquery實現代碼,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。
一、引言
在web頁面中,如果頁面較高,為了方便用戶快速地返回頂部,都會添加一個返回頂部按鈕。
其中淘寶網的是要滾動條的滾動距離大於某一段距離才顯示返回頂部按鈕;人人網的返回頂部直接在底部的工具條上;新浪微博的返回頂部在滾動高度大於0的時候顯示,且返回頂部的效果是平滑動畫效果。本文的實現就是類似於新浪微博的這種效果。
二、jQuery下的返回頂部功能
可以看到,如果頁面有滾動高度,右下角就會有一個含有“返回頂部”字樣的黑色背景半透明的小條條,如下圖所示:
點擊這裡“返回頂部”字樣的按鈕后,頁面就像是抹了潤滑劑一樣,倏地一聲就滑到頂部了,同時,該點擊按鈕也玩起了躲貓貓 – 不見了。
實現的原理嘛,恩……估計鮮有人關心,所以我也懶得浪費口水了,直接上代碼。
無論是這裡的jquery實現還是MooTools實現,下面的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);
}
. 代碼如下:
(function() {
VAR $backToTopTxt = "返回頂部", $backToToPEle = $('<p class="backToTop"></p>').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(); });
})();
. 代碼如下:
(function() {
var $backToTopTxt = "返回頂部", $backToTopEle = new Element("p", {
"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
});
})();
一、引言
在web頁面中,如果頁面較高,為了方便用戶快速地返回頂部,都會添加一個返回頂部按鈕。
其中淘寶網的是要滾動條的滾動距離大於某一段距離才顯示返回頂部按鈕;人人網的返回頂部直接在底部的工具條上;新浪微博的返回頂部在滾動高度大於0的時候顯示,且返回頂部的效果是平滑動畫效果。本文的實現就是類似於新浪微博的這種效果。
二、jQuery下的返回頂部功能
可以看到,如果頁面有滾動高度,右下角就會有一個含有“返回頂部”字樣的黑色背景半透明的小條條,如下圖所示:
點擊這裡“返回頂部”字樣的按鈕后,頁面就像是抹了潤滑劑一樣,倏地一聲就滑到頂部了,同時,該點擊按鈕也玩起了躲貓貓 – 不見了。
實現的原理嘛,恩……估計鮮有人關心,所以我也懶得浪費口水了,直接上代碼。
無論是這裡的jQuery實現還是MooTools實現,下面的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);
}
. 代碼如下:
(function() {
var $backToTopTxt = "返回頂部", $backToTopEle = $('<p class="backToTop"></p>').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(); });
})();
. 代碼如下:
(function() {
var $backToTopTxt = "返回頂部", $backToTopEle = new Element("p", {
"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
});
})();
覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!
以上是脚本宝典为你收集整理的js實例教程-仿新浪微博返回頂部的jquery實現代碼全部内容,希望文章能够帮你解决js實例教程-仿新浪微博返回頂部的jquery實現代碼所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。