js返回頂部實(shí)例分享
更新時(shí)間：2016年12月21日 11:06:26 作者：以茜為貴
本文主要分享了js返回頂部的實(shí)例代碼?？蓮?fù)制直接運(yùn)行，方便快捷。有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
話不多說(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')選擇，不然沒(méi)效果
})
});
</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返回頂部效果(自寫(xiě)代碼)
- 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-06
Js實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證實(shí)例代碼
這篇文章主要介紹了Js實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證實(shí)例代碼，可以識(shí)別身份證號(hào)碼的正確性，有興趣的可以了解一下2017-05-05
網(wǎng)頁(yè)設(shè)計(jì)很多情況下，需要注意ie跟firefox的不同區(qū)別，腳本之家提供了不好這樣的文章，大家可以好好看下。2009-04-04
這篇文章主要介紹了詳解JSON Web Token 入門(mén)教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
JavaScript刪除有序數(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-03
uniapp實(shí)現(xiàn)全局變量的幾種方式總結(jié)
這里說(shuō)全局變量,著重指的是能夠全局動(dòng)態(tài)響應(yīng)的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)全局變量的幾種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了javascript刷新父頁(yè)面方法匯總詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
javascript中巧用“閉包”實(shí)現(xiàn)程序的暫停執(zhí)行功能
javascript中巧用“閉包”實(shí)現(xiàn)程序的暫停執(zhí)行功能...2007-04-04
JavaScript統(tǒng)計(jì)字符出現(xiàn)次數(shù)
這篇文章主要為大家詳細(xì)介紹了JavaScript字符統(tǒng)計(jì)出現(xiàn)次數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了ES6新特性之模塊Module用法,簡(jiǎn)要說(shuō)明了模塊Module的概念、功能并結(jié)合實(shí)例形式分析了模塊Module的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04