jquery配合css簡單實現(xiàn)返回頂部效果
更新時間：2013年09月30日 16:53:13 作者：
返回頂部效果想必大家并不陌生吧，其實實現(xiàn)方法有很多，在本文為大家介紹下使用jquery是如何輕易實現(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);
}
jQuery代碼
(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(); }); })();：
復制代碼 代碼如下:
.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);
}
jQuery代碼
復制代碼 代碼如下:
(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(); }); })();：
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了jquery無縫圖片輪播組件封裝，支持自動輪播，手動輪播，無縫銜接，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
jquery $.ajax相關(guān)用法分享，使用jquery的朋友可以參考下2012-03-03
這篇文章主要介紹了jQuery實現(xiàn)碰到邊緣反彈的動畫,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
在做網(wǎng)站的開發(fā)過程中，可能需要使用彈出層，使用jquery的blockui插件可以很輕松的實現(xiàn)這個效果。2011-04-04
Jquery的each里用return true或false代替break或continue
Jquery的each里面用return false代替break；return ture 代替continue2014-05-05
jQuery實現(xiàn)點擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點擊某個按鈕，右側(cè)彈出一個div輸出對應(yīng)內(nèi)容的詳細信息，怎么實現(xiàn)的呢，今天小編給大家分享通過jquery實現(xiàn)點擊任意位置彈出層外關(guān)閉彈出層效果，感興趣的朋友一起看看吧2016-10-10
本篇文章主要是對jQuery選擇器進行了全面的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。2011-02-02
jquery在IE,FF瀏覽器差別的問題，在FF的效果很好，但是在IE上面沒有效果，當時也沒有在意，通過今天的練習發(fā)現(xiàn)，“是不是對于一些自定義的js，IE的兼容性不是太好呢2013-04-04
Jquery中$.post和$.ajax的用法小結(jié)
本節(jié)重點講的是jquery中調(diào)用ajax的4種方法中最常用的：$.post、和$ajax。如果讀者沒有javascript和jquery的知識，或者沒有ajax的概念，那么請先去問問度娘，再來讀本文。2015-04-04