DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> Jquery實現點擊頁面回到頂部
Jquery實現點擊頁面回到頂部
編輯:JQuery入門技巧     

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)這是效果圖

總結:一定注意是否引用了JQ類庫。

以上就是本文的全部內容,希望對大家有所幫助,謝謝對的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved