javascript簡單實現(xiàn)跟隨滾動條漂浮的返回頂部按鈕效果
本文實例講述了javascript簡單實現(xiàn)跟隨滾動條漂浮的返回頂部按鈕效果。分享給大家供大家參考,具體如下:
比較優(yōu)秀的一款超過一屏高度才顯示的,跟隨滾動條漂浮的返回頂部按鈕特效代碼。
運行效果如下圖所示:
完整實例代碼如下:
<!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>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript中for...of和for..in循環(huán)的區(qū)別
JS中循環(huán)語句眾多,你是否也有用的時候突然不知道用哪個的經(jīng)歷,本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案(cover-view不兼容)
這篇文章主要介紹了微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案,cover-view不兼容問題,需要的朋友可以參考下2019-11-11Vue之vue-tree-color組件實現(xiàn)組織架構(gòu)圖案例詳解
這篇文章主要介紹了Vue之vue-tree-color組件實現(xiàn)組織架構(gòu)圖案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09JavaScript中的location、history、navigator對象實例介紹
這篇文章主要介紹了JavaScript中的location、history、navigator對象實例介紹,需要的朋友可以參考下2023-05-05JS實現(xiàn)Excel導(dǎo)出功能以及導(dǎo)出亂碼問題解決詳解
這篇文章主要為大家詳細介紹了JavaScript如何調(diào)用后臺接口實現(xiàn)Excel導(dǎo)出功能以及導(dǎo)出亂碼問題的解決辦法,需要的小伙伴可以參考一下2023-07-07使用JavaScript獲取Request中參數(shù)的值方法
下面小編就為大家?guī)硪黄褂肑avaScript獲取Request中參數(shù)的值方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09淺析JavaScript Array和string的轉(zhuǎn)換(推薦)
下面小編就為大家?guī)硪黄獪\析JavaScript Array和string的轉(zhuǎn)換(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JavaScript實現(xiàn)獲取網(wǎng)絡(luò)通信進度
這篇文章主要為大家詳細介紹了如何使用Fetch?API和XMLHttpRequest(XHR)來執(zhí)行網(wǎng)絡(luò)請求,并重點說明如何獲取這兩種方法的網(wǎng)絡(luò)請求進度,感興趣的可以了解下2023-12-12