【JQ+錨標記實現點擊頁面回到頂部】

前言：今天想寫個頁面常用到的【點擊回到頁面頂部或是首頁的功能】，生活和職場一樣，總會有低谷的時候，這個時候咱也別慫、別慫、別慫，說三遍！那都不是事，工作沒了，再找唄，就像我上周五，團隊解散那天，我是笑著走的，還給小白揮了揮手，微笑一個。那句話叫什麼來著，佛祖雖給你關了一扇門，說不定會再給你開一扇窗。明天我就換工作了，我感謝我的同學。

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

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

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

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

 1 /* CSS */
 2 　　　　　　.top_sec {
 3                 position: fixed;
 4                 bottom: 74px;
 5                 right: 12px;
 6                 width: 42px;
 7                 z-index: 999;
 8                 display: none;
 9             }
10             
11             #goPageTop {
12                 width: 42px;
13                 height: 42px;
14                 margin-bottom: 10px;
15                 border-radius: 50%;
16                 background: url(img/go_top_icon.png) no-repeat 0 0;
17                 background-size: 42px auto;
18                 display: block;
19             }
20             
21             #goPageHome {
22                 width: 42px;
23                 height: 42px;
24                 position: relative;
25                 border-radius: 50%;
26                 background: url(img/go_home_icon.png) no-repeat 0 0;
27                 background-size: 42px auto;
28                 display: block;
29             }

2）來看看實現代碼

 1
 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
 2             /* 回到頂部 */
 3             $(function() {
 4                 $(function() {
 5                     $(window).scroll(function() {
 6                         /* 判斷滾動條 距離頁面頂部的距離  100可以自定義*/
 7                         if($(window).scrollTop() > 100) {
 8                             $("#top_sec").fadeIn(100); /* 這裡用.show()也可以 只是效果太醜 */
 9                         } else {
10                             $("#top_sec").fadeOut(100);
11                         }
12                     });
13                 });
14                 /* 給圖片元素綁定 回到頂部的事件 */
15                 $(function() {
16                     $("#goPageTop").on("click", function() {
17                         $('body,html').animate({
18                             scrollTop: 0
19                         }, 1000);
20                         return false;
21                     });
22                 });
23             });
24 </script>

3）這是效果圖

總結：一定註意是否引用了JQ類庫。我覺得我寫的東西都很簡單，也許根本就沒必要寫，但是，一個學習前端開發的過程，我有必要用文字記錄一下這個過程，漸漸地，這個過程會記錄更多的東西。明天又是新的一天，我的新工作...