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(); }); })();：
復(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);
}
jQuery代碼
復(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(); }); })();：
您可能感興趣的文章:
相關(guān)文章
jQueryUI Datepicker組件設(shè)置日期高亮
這篇文章主要介紹了jQueryUI Datepicker組件設(shè)置日期高亮的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
這篇文章主要介紹了jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法,涉及jQuery操作文本框的技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery在header中設(shè)置請求信息的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本文將詳細(xì)介紹下jQuery對象作為數(shù)組處理、創(chuàng)建一個空的jQuery對象、selector屬性、選擇隨機元素，感興趣的朋友可以參考下哈2013-04-04
本文給大家匯總介紹了jQuery的四種選擇器的使用方法以及示例，非常的簡單實用，希望對大家學(xué)習(xí)jquery能夠有所幫助。2016-06-06
jQuery+ThinkPHP+Ajax實現(xiàn)即時消息提醒功能實例代碼
這篇文章主要介紹了jQuery+ThinkPHP+Ajax實現(xiàn)即時消息提醒功能的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
下面小編就為大家?guī)硪黄猨Q處理xml文件和xml字符串的方法(詳解)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多折線圖效果,結(jié)合完整實例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery中:visible選擇器用法,實例分析了:visible選擇器的功能、定義及匹配操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery實現(xiàn)帶展開動畫的導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)帶展開動畫的導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07