abstract：本文分享了網(wǎng)頁中經(jīng)常出現(xiàn)的返回頂部效果，相比原生Javascript,jquery實(shí)現(xiàn)起來能夠省略不少代碼。相比原生Javascript，jquery實(shí)現(xiàn)起來能夠省略不少代碼。接下來就直接貼代碼啦：$(function(){     $(window).scroll(function(){ //scroll--瀏覽器滾動(dòng)條滾動(dòng)式觸發(fā)  &

本文分享了網(wǎng)頁中經(jīng)常出現(xiàn)的返回頂部效果，相比原生Javascript,jquery實(shí)現(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)畫效果。

更多關(guān)于簡單幾步實(shí)現(xiàn)返回頂部效果請關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其它文章！