快捷導(dǎo)航

jquery實(shí)現(xiàn)點(diǎn)擊頁面回到頂部

更新時(shí)間：2016年11月23日 11:00:34 作者：玩世不恭、

本篇文章主要是對(duì)點(diǎn)擊回到頁面頂部或是首頁的功能進(jìn)行了介紹，這是頁面常用到的效果，需要的朋友可以過來參考下

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

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

1）首先我們寫好DOM結(jié)構(gòu)、寫好CSS樣式表

/* HTML */
<div style="width: 100%; height: 3000px;">
  <!--這個(gè)帶ID的p標(biāo)簽，叫做錨標(biāo)記，放在頁面頂部位置，目的：防止代碼不起作用時(shí)(比如類庫版本瀏覽器不支持)，你點(diǎn)擊回到頂部，仍然可以通過錨標(biāo)記實(shí)現(xiàn)-->
  <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）來看看實(shí)現(xiàn)代碼

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
   <script type="text/javascript">
   /* 回到頂部 */
   $(function() {
    $(function() {
     $(window).scroll(function() {
      /* 判斷滾動(dòng)條 距離頁面頂部的距離 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）這是效果圖