js實現(xiàn)漂浮回頂部按鈕實例
更新時間:2015年05月06日 12:23:50 作者:liuzhijun1989
這篇文章主要介紹了js實現(xiàn)漂浮回頂部按鈕的方法,實例分析了javascript實現(xiàn)返回頂部功能的樣式與動態(tài)實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)漂浮回頂部按鈕的方法。分享給大家供大家參考。具體實現(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> <!--拖動滾動條或滾動鼠標輪--> window.onscroll=function(){ if(document.body.scrollTop||document.documentElement.scrollTop>0){ document.getElementById('rTop').style.display="block" }else{ document.getElementById('rTop').style.display="none" } } <!--點擊“回到頂部”按鈕--> 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>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
IE之動態(tài)添加DOM節(jié)點觸發(fā)window.resize事件
因為頁面很多UI是絕對定位的,所以當窗口大小改變的時候會使原先的布局混亂,只好在每次window.resize的時候重新布局...2010-07-07詳解如何使用JavaScript實現(xiàn)自定義的雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定是一種編程模式,用于在用戶界面和數(shù)據(jù)模型之間實現(xiàn)數(shù)據(jù)的同步更新,它允許用戶界面中的數(shù)據(jù)變化自動更新到數(shù)據(jù)模型中,在這篇文章中,我會使用基于觀察者模式和基于Proxy對象來實現(xiàn)JS的自定義雙向數(shù)據(jù)綁定2023-08-08js中substr,substring,indexOf,lastIndexOf,split,replace的用法詳解
這篇文章主要介紹了js中substr,substring,indexOf,lastIndexOf,split,replace的用法詳解的相關資料,需要的朋友可以參考下2015-11-11