jαpαn丰满人妻hdxxxx,juliaann无码丰满熟妇

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何用jQuery實(shí)現(xiàn)頁面返回頂部的效果（附代碼）

yulia

發(fā)布： 2018-10-18 11:51:12

原創(chuàng)

4628人瀏覽過

大家在瀏覽網(wǎng)站時(shí)有沒有發(fā)現(xiàn)，往下滑動(dòng)頁面會(huì)出現(xiàn)一個(gè)返回頂部的按鈕，點(diǎn)擊就能返回頂部，那你知道html頁面返回頂部怎么實(shí)現(xiàn)的嗎？這篇文章就給大家分享最簡單的html頁面返回頂部的jquery代碼，感興趣的朋友可以參考一下。

實(shí)現(xiàn)頁面返回頂部的效果需要用到很多JavaScript知識(shí)，比如：function()，animate，fadeOut等等，如有不清楚的小伙伴可以參考PHP中文網(wǎng)的相關(guān)文章，或者訪問 JavaScript視頻教程。

實(shí)例描述：用戶往下滑動(dòng)頁面，當(dāng)滾動(dòng)條距離頂部的距離大于100px時(shí)，用fadeIn顯示返回按鈕，當(dāng)點(diǎn)擊按鈕返回頂部后，按鈕消失，具體代碼如下：

HTML部分：

<div id="wrapper">
     <div class="cont1"></div>
     <div class="cont2"></div>
     <div class="cont3"></div>
     <div class="cont4"></div>
     <a href="javascript:void(0)" id="toTop" style="display: block;"> 
     </a>
</div>

登錄后復(fù)制

CSS部分：

*{margin: 0;padding: 0;}
            #wrapper{margin: 0 auto;width: 500px;}
            .cont1{height: 500px;background-color: wheat;}
            .cont2{height: 500px;background-color: honeydew;}
            .cont3{height: 500px;background-color: blueviolet;}
            .cont4{height: 500px;background-color: pink;}
            #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

登錄后復(fù)制

JavaScript部分：

注：因?yàn)橛玫氖莏Query寫的，要記得引入jQuery文件啊

$(function(){
         //當(dāng)滾動(dòng)條的位置處于距頂部100像素以下時(shí)，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
         $(function () {
             $(window).scroll(function(){
                 if ($(window).scrollTop()>100){
                     $("#toTop").fadeIn(1000);
                 }
                 else
                 {
                     $("#toTop").fadeOut(1000);
                 }
             });
             //當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁面頂部位置
             $("#toTop").click(function(){
                 $('body,html').animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

登錄后復(fù)制

效果圖：