js返回頂部實(shí)例分享
話不多說(shuō),請(qǐng)看實(shí)例
1、HTML結(jié)構(gòu)
<div class="return_top"></div>
2、css樣式
.return_top{ width: 50px; height: 50px; background: url(../images/lanren.gif) no-repeat center #FF8D16; position:fixed; right: 30px; bottom: 30px; display: none; cursor: pointer; z-index: 99; }
3、js效果
<script> $(function(){ $(window).scroll(function(){ var topDistance=$(window).scrollTop(); //獲取鼠標(biāo)在本窗口現(xiàn)有狀態(tài)下移動(dòng)的高度 if(topDistance>100){ //如果移動(dòng)高度大于100px,頂部圖標(biāo)單單顯示出,如果移動(dòng)高度小于等于100,頂部圖標(biāo)不顯示 $('.return_top').fadeIn(800); }else{ $('.return_top').fadeOut(800); } }); $('.return_top').on('click',function(){ $('html,body').animate({scrollTop:0},800); //必須用$('html,body')選擇,不然沒效果 }) }); </script>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- js+JQuery返回頂部功能如何實(shí)現(xiàn)
- 一個(gè)簡(jiǎn)單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹
- javascript返回頂部效果(自寫代碼)
- js簡(jiǎn)單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- javascript實(shí)現(xiàn)博客園頁(yè)面右下角返回頂部按鈕
- javascript簡(jiǎn)單實(shí)現(xiàn)跟隨滾動(dòng)條漂浮的返回頂部按鈕效果
- 原生js實(shí)現(xiàn)返回頂部緩沖效果
- js實(shí)現(xiàn)返回頂部效果
- JS返回頂部實(shí)例代碼
相關(guān)文章
JavaScript檢查數(shù)字是否為整數(shù)或浮點(diǎn)數(shù)的方法
這篇文章主要介紹了JavaScript檢查數(shù)字是否為整數(shù)或浮點(diǎn)數(shù)的方法,涉及javascript類型判斷的相關(guān)技巧,需要的朋友可以參考下2015-06-06Js實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證實(shí)例代碼
這篇文章主要介紹了Js實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證實(shí)例代碼,可以識(shí)別身份證號(hào)碼的正確性,有興趣的可以了解一下2017-05-05JavaScript刪除有序數(shù)組中的重復(fù)項(xiàng)
這篇文章主要介紹了JavaScript刪除有序數(shù)組中的重復(fù)項(xiàng),主要解決有序數(shù)組?nums?,要求原地刪除重復(fù)出現(xiàn)的元素,使每個(gè)元素只出現(xiàn)一次,返回刪除后數(shù)組的新長(zhǎng)的問(wèn)題,下面實(shí)現(xiàn)操作,需要的小伙伴可以參考一下2022-03-03uniapp實(shí)現(xiàn)全局變量的幾種方式總結(jié)
這里說(shuō)全局變量,著重指的是能夠全局動(dòng)態(tài)響應(yīng)的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)全局變量的幾種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10javascript中巧用“閉包”實(shí)現(xiàn)程序的暫停執(zhí)行功能
javascript中巧用“閉包”實(shí)現(xiàn)程序的暫停執(zhí)行功能...2007-04-04JavaScript統(tǒng)計(jì)字符出現(xiàn)次數(shù)
這篇文章主要為大家詳細(xì)介紹了JavaScript字符統(tǒng)計(jì)出現(xiàn)次數(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03