簡單幾步實(shí)現(xiàn)返回頂部效果

更新時(shí)間：2016年12月05日 10:34:55 作者：勞卜

本文分享了網(wǎng)頁中經(jīng)常出現(xiàn)的返回頂部效果，相比原生Javascript,jquery實(shí)現(xiàn)起來能夠省略不少代碼。希望對(duì)大家有所幫助

今天與大家分享下網(wǎng)頁中經(jīng)常出現(xiàn)的返回頂部效果

相比原生Javascript，jquery實(shí)現(xiàn)起來能夠省略不少代碼。

接下來就直接貼代碼啦：

$(function(){
    $(window).scroll(function(){ //scroll--瀏覽器滾動(dòng)條滾動(dòng)式觸發(fā)
        var wHeight=$(window).height(); //獲取瀏覽器可視窗口高度
        var wTop=$(window).scrollTop(); //獲取滾動(dòng)條距離頂部高度
        if(wTop>=wHeight) //當(dāng)滾動(dòng)條距離頂部高度超過一屏?xí)r執(zhí)行
        {
           $("#btn").show(); //返回頂部按鈕顯示
        }
        else{
           $("#btn").hide(); //返回頂部按鈕隱藏
        }
      });
      $("#btn").click(function(){
          $("html,body").animate({scrollTop:0},500); //頁面500毫秒返回頂部
      });
 });

ok，是不是很簡單，jquery直接為我們提供的animate方法可以很快實(shí)現(xiàn)返回頂部的動(dòng)畫效果。

以上就是本文的全部內(nèi)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
jQuery formValidator表單驗(yàn)證
這篇文章主要介紹了jQuery formValidator表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
2016-01-01
jQuery 學(xué)習(xí) 幾種常用方法
jQuery中為我們提供了很多有用的方法和屬性，自己總結(jié)的一些常用的函數(shù)，方法。個(gè)人認(rèn)為在開發(fā)中會(huì)比較常用的，僅供大家學(xué)習(xí)和參考。
2009-06-06
使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
jquery提供了很好的ajax交互，我這里用的是直接返回字符串，用的是jquery.load方法從數(shù)據(jù)庫取出的數(shù)據(jù)
2014-01-01
jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明
jQuery+jqmodal彈出窗口的制作方法，需要的朋友可以參考下。
2010-06-06
jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)滾動(dòng)事件的監(jiān)聽、響應(yīng)及數(shù)據(jù)加載相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對(duì)于一系列需要按次序運(yùn)行的函數(shù)特別有用。特別animate動(dòng)畫，ajax，以及timeout等需要一定時(shí)間的函數(shù)
2014-03-03
treepanel動(dòng)態(tài)加載數(shù)據(jù)實(shí)現(xiàn)代碼
本文介紹一個(gè)treepanel動(dòng)態(tài)加載數(shù)據(jù)的例子，需要了解的朋友可以參考下
2012-12-12
jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法,涉及jQuery操作頁面元素滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jquery 跨域訪問問題解決方法(筆記)
對(duì)于js跨域訪問，在先前也曾碰到過，但可能并沒有認(rèn)真去對(duì)待，可能查看過相關(guān)資料，但當(dāng)著兩天再次碰到這個(gè)問題時(shí)，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強(qiáng)大的記憶力默哀一下。
2011-06-06