jquery實現點擊頁面回到頂部

2019-11-19 18:51:06

字體：大中小

來源：轉載

供稿：網友

a)下面看看實現，實現很簡單，通過JQ判斷滾動條向下滾動的長度大于多少時顯示【回到頂部+回到首頁】的圖標（換一種理解：滾動條頂端距離頁面頂部的距離），另外一種實現方法，就是通過錨標記，很好理解，就是標記一個位置，事件激活時，給我回到這個位置

b)JQ判斷滾動條向下滾動的長度大于多少時，這個方法，也可以用來做頁面的自動加載...就是你不停滾動，數據就不停加載...用戶體驗很好的喔【有時間就寫】

1）首先我們寫好DOM結構、寫好CSS樣式表

/* HTML */<div style="width: 100%; height: 3000px;">  <!--這個帶ID的p標簽，叫做錨標記，放在頁面頂部位置，目的：防止代碼不起作用時(比如類庫版本瀏覽器不支持)，你點擊回到頂部，仍然可以通過錨標記實現-->  <p id="pageTop"></p>  <section id="top_sec" class="top_sec">   <a href="#pageTop" id="goPageTop"></a>   <a href="#" id="goPageHome"></a>  </section></div>

/* CSS */　　　　　　.top_sec {    position: fixed;    bottom: 74px;    right: 12px;    width: 42px;    z-index: 999;    display: none;   }      #goPageTop {    width: 42px;    height: 42px;    margin-bottom: 10px;    border-radius: 50%;    background: url(img/go_top_icon.png) no-repeat 0 0;    background-size: 42px auto;    display: block;   }      #goPageHome {    width: 42px;    height: 42px;    position: relative;    border-radius: 50%;    background: url(img/go_home_icon.png) no-repeat 0 0;    background-size: 42px auto;    display: block;   }

2）來看看實現代碼

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>   <script type="text/javascript">   /* 回到頂部 */   $(function() {    $(function() {     $(window).scroll(function() {      /* 判斷滾動條 距離頁面頂部的距離 100可以自定義*/      if($(window).scrollTop() > 100) {       $("#top_sec").fadeIn(100); /* 這里用.show()也可以 只是效果太丑 */      } else {       $("#top_sec").fadeOut(100);      }     });    });    /* 給圖片元素綁定 回到頂部的事件 */    $(function() {     $("#goPageTop").on("click", function() {      $('body,html').animate({       scrollTop: 0      }, 1000);      return false;     });    });   });</script>

3）這是效果圖