這篇文章主要介紹了js實現漂浮回頂部按鈕的方法,實例分析了javascript實現返回頂部功能的樣式與動態實現技巧,非常具有實用價值,需要的朋友可以參考下
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!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程序設計有所幫助。
注< >：更多精彩教程請關注編程