js返回頂部實例分享
更新時間：2016年12月21日 11:06:26 作者：以茜為貴
本文主要分享了js返回頂部的實例代碼。可復(fù)制直接運行，方便快捷。有很好的參考價值，需要的朋友一起來看下吧
話不多說，請看實例
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)下移動的高度
if(topDistance>100){ //如果移動高度大于100px,頂部圖標(biāo)單單顯示出，如果移動高度小于等于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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JavaScript檢查數(shù)字是否為整數(shù)或浮點數(shù)的方法
這篇文章主要介紹了JavaScript檢查數(shù)字是否為整數(shù)或浮點數(shù)的方法,涉及javascript類型判斷的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Js實現(xiàn)中國公民身份證號碼有效性驗證實例代碼，可以識別身份證號碼的正確性，有興趣的可以了解一下2017-05-05
網(wǎng)頁設(shè)計很多情況下，需要注意ie跟firefox的不同區(qū)別，腳本之家提供了不好這樣的文章，大家可以好好看下。2009-04-04
這篇文章主要介紹了詳解JSON Web Token 入門教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
JavaScript刪除有序數(shù)組中的重復(fù)項
這篇文章主要介紹了JavaScript刪除有序數(shù)組中的重復(fù)項，主要解決有序數(shù)組?nums?，要求原地刪除重復(fù)出現(xiàn)的元素，使每個元素只出現(xiàn)一次，返回刪除后數(shù)組的新長的問題，下面實現(xiàn)操作，需要的小伙伴可以參考一下2022-03-03
uniapp實現(xiàn)全局變量的幾種方式總結(jié)
這里說全局變量,著重指的是能夠全局動態(tài)響應(yīng)的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)全局變量的幾種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了javascript刷新父頁面方法匯總詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
javascript中巧用“閉包”實現(xiàn)程序的暫停執(zhí)行功能
javascript中巧用“閉包”實現(xiàn)程序的暫停執(zhí)行功能...2007-04-04
JavaScript統(tǒng)計字符出現(xiàn)次數(shù)
這篇文章主要為大家詳細(xì)介紹了JavaScript字符統(tǒng)計出現(xiàn)次數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了ES6新特性之模塊Module用法,簡要說明了模塊Module的概念、功能并結(jié)合實例形式分析了模塊Module的使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-04-04