返回頂部按鈕響應(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>
您可能感興趣的文章:
- javascript簡(jiǎn)單實(shí)現(xiàn)跟隨滾動(dòng)條漂浮的返回頂部按鈕效果
- jquery實(shí)現(xiàn)頁(yè)面常用的返回頂部效果
- jQuery實(shí)現(xiàn)返回頂部功能
- 基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
- jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部效果的方法
- js簡(jiǎn)單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)博客園頁(yè)面右下角返回頂部按鈕
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- 簡(jiǎn)單幾步實(shí)現(xiàn)返回頂部效果
相關(guān)文章
Javascript實(shí)現(xiàn)的Map集合工具類完整實(shí)例
這篇文章主要介紹了Javascript實(shí)現(xiàn)的Map集合工具類,以完整實(shí)例形式分析了javascript實(shí)現(xiàn)map集合的構(gòu)造、查找、刪除、判斷等相關(guān)技巧,需要的朋友可以參考下2015-07-07
javascript垃圾收集機(jī)制與內(nèi)存泄漏詳細(xì)解析
本文是對(duì)javascript中的垃圾收集機(jī)制與內(nèi)存泄漏進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11
JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除
HTML頁(yè)面元素可以通過(guò)js動(dòng)態(tài)改變,比如可以向HTML中添加元素或刪除某個(gè)元素,下面為示例代碼,感興趣的朋友不要錯(cuò)過(guò)2014-08-08
JS簡(jiǎn)單操作select和dropdownlist實(shí)例
這篇文章主要介紹了JS簡(jiǎn)單操作select和dropdownlist的方法,以實(shí)例形式講述了js針對(duì)服務(wù)器控件select和dropdownlist的讀寫(xiě)操作方法,是js與.net交互的典型應(yīng)用實(shí)例,需要的朋友可以參考下2014-11-11
js下寫(xiě)一個(gè)事件隊(duì)列操作函數(shù)
異步操作可能會(huì)產(chǎn)生你不希望的事件觸發(fā)順序。這個(gè)問(wèn)題以前也遇到過(guò),當(dāng)時(shí)沒(méi)想太多,也就是直接多層嵌套(在ajax返回以后嵌套下一個(gè)事件)來(lái)解決。2010-07-07
js實(shí)現(xiàn)淘寶首頁(yè)的banner欄效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)淘寶首頁(yè)的banner欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11

