返回頂部按鈕響應(yīng)滾動且動態(tài)顯示與隱藏
更新時間：2014年10月14日 17:08:32 投稿：whsnow
返回頂部功能在很多的網(wǎng)站上都有，判斷滾動參數(shù)動態(tài)顯示與隱藏，下面的示例很實用，喜歡的朋友可以收藏下
很多的網(wǎng)站上都有返回頂部功能，判斷滾動參數(shù)動態(tài)顯示與隱藏，比較適合初學(xué)者
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>實現(xiàn)動態(tài)的顯示回到頂部與否</title>
<style>
/*返回頂部*/
.back_top {width:45px;height:45px;background:url(back_top_new.png) 0 0;position:fixed;left:50%;margin-left:500px;bottom:105px;display:none;}
.back_top:hover{background:url(images/back_top_new.png) 0 -46px;}
</style>
</head>
<body>
<a title="返回頂部" href="javascript:void(0)" class="back_top"></a>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
});
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
}, false);
</script>
</body>
</html>
相關(guān)文章
最近幾天閑來無事，隨便寫了點代碼玩了玩。個人覺得，應(yīng)該把編碼當(dāng)做一種樂趣，要不然會覺得很累...2011-01-01
Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構(gòu)造、查找、刪除、判斷等相關(guān)技巧,需要的朋友可以參考下2015-07-07
下面小編就為大家分享一篇基于百度地圖api清除指定覆蓋物(Overlay)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
javascript垃圾收集機(jī)制與內(nèi)存泄漏詳細(xì)解析
本文是對javascript中的垃圾收集機(jī)制與內(nèi)存泄漏進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)考勤日歷功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
HTML頁面元素可以通過js動態(tài)改變，比如可以向HTML中添加元素或刪除某個元素，下面為示例代碼，感興趣的朋友不要錯過2014-08-08
這篇文章主要介紹了JS簡單操作select和dropdownlist的方法,以實例形式講述了js針對服務(wù)器控件select和dropdownlist的讀寫操作方法,是js與.net交互的典型應(yīng)用實例,需要的朋友可以參考下2014-11-11
異步操作可能會產(chǎn)生你不希望的事件觸發(fā)順序。這個問題以前也遇到過，當(dāng)時沒想太多，也就是直接多層嵌套（在ajax返回以后嵌套下一個事件）來解決。2010-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)淘寶首頁的banner欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Javascript的JSBridge，對JSBridge感興趣的同學(xué)，可以參考下2021-04-04