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