返回頂部按鈕響應滾動且動態(tài)顯示與隱藏
更新時間：2014年10月14日 17:08:32 投稿：whsnow
返回頂部功能在很多的網(wǎng)站上都有，判斷滾動參數(shù)動態(tài)顯示與隱藏，下面的示例很實用，喜歡的朋友可以收藏下
很多的網(wǎng)站上都有返回頂部功能，判斷滾動參數(shù)動態(tài)顯示與隱藏，比較適合初學者
<!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>
相關文章
有時候我們在網(wǎng)頁制作過程中需要彈出窗口，一般情況下，我們更希望窗口可以居中顯示2007-08-08
基于Cesium實現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標注
這篇文章主要介紹了如何利用Cesium實現(xiàn)繪制圓形、正方形、多邊形、橢圓等形狀的圖形標注，文中的示例代碼講解詳細，需要的可以參考一下2022-06-06
如何使用JS獲取當前節(jié)點的兄弟/父/子節(jié)點
在日常的網(wǎng)頁開發(fā)中,我們會遇到獲取節(jié)點的問題,而js是寫網(wǎng)頁的最基礎的語言,也是最常用的,這篇文章主要給大家介紹了關于如何使用JS獲取當前節(jié)點的兄弟/父/子節(jié)點的相關資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JS中bridge的原理與封裝，文章圍繞主題的相關資料展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
本文是小編基于js實現(xiàn)的520表白代碼，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
下面小編就為大家?guī)硪黄狫S 調(diào)試中常見的報錯問題解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Webpack之tree-starking 解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了JS實現(xiàn)的按鈕點擊顏色切換功能,涉及js鼠標事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JS學習筆記之閉包,結合具體案例形式分析了javascript實現(xiàn)與使用閉包的相關操作技巧,需要的朋友可以參考下2019-05-05
js圖數(shù)據(jù)結構處理 迪杰斯特拉算法代碼實例
這篇文章主要介紹了js圖數(shù)據(jù)結構處理 迪杰斯特拉算法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09