簡單幾步實現(xiàn)返回頂部效果
更新時間：2016年12月05日 10:34:55 作者：勞卜
本文分享了網(wǎng)頁中經常出現(xiàn)的返回頂部效果，相比原生Javascript,jquery實現(xiàn)起來能夠省略不少代碼。希望對大家有所幫助
今天與大家分享下網(wǎng)頁中經常出現(xiàn)的返回頂部效果
相比原生Javascript，jquery實現(xiàn)起來能夠省略不少代碼。
接下來就直接貼代碼啦：
$(function(){
$(window).scroll(function(){ //scroll--瀏覽器滾動條滾動式觸發(fā)
var wHeight=$(window).height(); //獲取瀏覽器可視窗口高度
var wTop=$(window).scrollTop(); //獲取滾動條距離頂部高度
if(wTop>=wHeight) //當滾動條距離頂部高度超過一屏時執(zhí)行
{
$("#btn").show(); //返回頂部按鈕顯示
}
else{
$("#btn").hide(); //返回頂部按鈕隱藏
}
});
$("#btn").click(function(){
$("html,body").animate({scrollTop:0},500); //頁面500毫秒返回頂部
});
});
ok，是不是很簡單，jquery直接為我們提供的animate方法可以很快實現(xiàn)返回頂部的動畫效果。
以上就是本文的全部內容，希望對大家有所幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表單驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了jQuery formValidator表單驗證 的相關資料,需要的朋友可以參考下2016-01-01
jQuery中為我們提供了很多有用的方法和屬性，自己總結的一些常用的函數(shù)，方法。個人認為在開發(fā)中會比較常用的，僅供大家學習和參考。2009-06-06
使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
jquery提供了很好的ajax交互，我這里用的是直接返回字符串，用的是jquery.load方法從數(shù)據(jù)庫取出的數(shù)據(jù)2014-01-01
jQuery+jqmodal彈出窗口實現(xiàn)代碼分明
jQuery+jqmodal彈出窗口的制作方法，需要的朋友可以參考下。2010-06-06
jQuery實現(xiàn)當拉動滾動條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實現(xiàn)當拉動滾動條到底部加載數(shù)據(jù)的方法,結合實例形式分析了jQuery針對滾動事件的監(jiān)聽、響應及數(shù)據(jù)加載相關操作技巧,需要的朋友可以參考下2019-01-01
jquery隊列queue與原生模仿其實現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運行的函數(shù)特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數(shù)2014-03-03
treepanel動態(tài)加載數(shù)據(jù)實現(xiàn)代碼
本文介紹一個treepanel動態(tài)加載數(shù)據(jù)的例子，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了jQuery實現(xiàn)浮動層隨瀏覽器滾動條滾動的方法,涉及jQuery操作頁面元素滾動的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
對于js跨域訪問，在先前也曾碰到過，但可能并沒有認真去對待，可能查看過相關資料，但當著兩天再次碰到這個問題時，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強大的記憶力默哀一下。2011-06-06