快捷導(dǎo)航

返回頂部按鈕響應(yīng)滾動(dòng)且動(dòng)態(tài)顯示與隱藏

更新時(shí)間：2014年10月14日 17:08:32 投稿：whsnow

返回頂部功能在很多的網(wǎng)站上都有，判斷滾動(dòng)參數(shù)動(dòng)態(tài)顯示與隱藏，下面的示例很實(shí)用，喜歡的朋友可以收藏下

很多的網(wǎng)站上都有返回頂部功能，判斷滾動(dòng)參數(shù)動(dòng)態(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>實(shí)現(xiàn)動(dòng)態(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)文章

javascript之彈出窗口居中的代碼
有時(shí)候我們?cè)诰W(wǎng)頁(yè)制作過(guò)程中需要彈出窗口，一般情況下，我們更希望窗口可以居中顯示
2007-08-08
基于Cesium實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
這篇文章主要介紹了如何利用Cesium實(shí)現(xiàn)繪制圓形、正方形、多邊形、橢圓等形狀的圖形標(biāo)注，文中的示例代碼講解詳細(xì)，需要的可以參考一下
2022-06-06
如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)
在日常的網(wǎng)頁(yè)開(kāi)發(fā)中,我們會(huì)遇到獲取節(jié)點(diǎn)的問(wèn)題,而js是寫(xiě)網(wǎng)頁(yè)的最基礎(chǔ)的語(yǔ)言,也是最常用的,這篇文章主要給大家介紹了關(guān)于如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下
2023-04-04
JS中bridge的原理與封裝
這篇文章主要介紹了JS中bridge的原理與封裝，文章圍繞主題的相關(guān)資料展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
JS實(shí)現(xiàn)520 表白簡(jiǎn)單代碼
本文是小編基于js實(shí)現(xiàn)的520表白代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
JS 調(diào)試中常見(jiàn)的報(bào)錯(cuò)問(wèn)題解決方法
下面小編就為大家?guī)?lái)一篇JS 調(diào)試中常見(jiàn)的報(bào)錯(cuò)問(wèn)題解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
Webpack之tree-starking 解析
這篇文章主要介紹了Webpack之tree-starking 解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能,涉及js鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
JS學(xué)習(xí)筆記之閉包小案例分析
這篇文章主要介紹了JS學(xué)習(xí)筆記之閉包,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
js圖數(shù)據(jù)結(jié)構(gòu)處理迪杰斯特拉算法代碼實(shí)例
這篇文章主要介紹了js圖數(shù)據(jù)結(jié)構(gòu)處理迪杰斯特拉算法代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09