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類庫。
以上就是本文的全部內容,希望對大家有所幫助,謝謝對的支持!