js實(shí)現(xiàn)漂浮回頂部按鈕實(shí)例
更新時(shí)間:2015年05月06日 12:23:50 作者:liuzhijun1989
這篇文章主要介紹了js實(shí)現(xiàn)漂浮回頂部按鈕的方法,實(shí)例分析了javascript實(shí)現(xiàn)返回頂部功能的樣式與動(dòng)態(tài)實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)漂浮回頂部按鈕的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!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>漂浮回頂部按鈕</title> <style> body{ height:2000px; } .rTop{ width:100px; height:25px; text-align:center; font-size:small; line-height:25px; border:1px solid #999; position:fixed; right:0; bottom:0; border-bottom-color:#333; border-right-color:#333; margin:5px; cursor:pointer; display:none } </style> <script> <!--拖動(dòng)滾動(dòng)條或滾動(dòng)鼠標(biāo)輪--> window.onscroll=function(){ if(document.body.scrollTop||document.documentElement.scrollTop>0){ document.getElementById('rTop').style.display="block" }else{ document.getElementById('rTop').style.display="none" } } <!--點(diǎn)擊“回到頂部”按鈕--> function toTop(){ window.scrollTo('0','0'); document.getElementById('rTop').style.display="none" } </script> </head> <body> <div class="rTop" id="rTop" onClick="toTop()">返回頂部</div> <h1>頂部</h1> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>測試</h1><p></p><h1>測試</h1><p></p><h1>測試</h1><p></p> <h1>底部</h1> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
IE之動(dòng)態(tài)添加DOM節(jié)點(diǎn)觸發(fā)window.resize事件
因?yàn)轫撁婧芏郩I是絕對(duì)定位的,所以當(dāng)窗口大小改變的時(shí)候會(huì)使原先的布局混亂,只好在每次window.resize的時(shí)候重新布局...2010-07-07JavaScript實(shí)現(xiàn)alert彈框效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)alert彈框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11詳解如何使用JavaScript實(shí)現(xiàn)自定義的雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定是一種編程模式,用于在用戶界面和數(shù)據(jù)模型之間實(shí)現(xiàn)數(shù)據(jù)的同步更新,它允許用戶界面中的數(shù)據(jù)變化自動(dòng)更新到數(shù)據(jù)模型中,在這篇文章中,我會(huì)使用基于觀察者模式和基于Proxy對(duì)象來實(shí)現(xiàn)JS的自定義雙向數(shù)據(jù)綁定2023-08-08js中substr,substring,indexOf,lastIndexOf,split,replace的用法詳解
這篇文章主要介紹了js中substr,substring,indexOf,lastIndexOf,split,replace的用法詳解的相關(guān)資料,需要的朋友可以參考下2015-11-11