本文實例講述了javascript簡單實現跟隨滾動條漂浮的返回頂部按鈕效果。分享給大家供大家參考,具體如下:
比較優秀的一款超過一屏高度才顯示的,跟隨滾動條漂浮的返回頂部按鈕特效代碼。
運行效果如下圖所示:

完整實例代碼如下:
<!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>test</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></head><body><div class="rTop" id="rTop">返回頂部</div><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" } }</script></body></html>更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答