返回頂部按鈕響應(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)文章
Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構(gòu)造、查找、刪除、判斷等相關(guān)技巧,需要的朋友可以參考下2015-07-07javascript垃圾收集機制與內(nèi)存泄漏詳細解析
本文是對javascript中的垃圾收集機制與內(nèi)存泄漏進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
HTML頁面元素可以通過js動態(tài)改變,比如可以向HTML中添加元素或刪除某個元素,下面為示例代碼,感興趣的朋友不要錯過2014-08-08