《返回頂部》淡入淡出平滑返回頂部的效果核心函數

使用a標籤作返回頂部的的觸發點時，

發現a標籤包含的內容會多出連接下劃線

在css內使用text-decoration:none;能夠隱藏掉a標籤內的連接下劃線

jquery 內窗口滾動監測函數：scroll()（第一個重要函數）

使用方法：

例：監測瀏覽器窗口的滾動

1 $(window).scroll(function(){
2    //xxxx  當瀏覽器窗口向下或向上滾動時要執行的內容 
3 })

監測id是aaa的div內滾動條滾動

1 $('#aaa').scroll(function(){
2     //xxxx  滾動時要執行的內容
3 })

滾動時要獲取匹配元素相對於滾動條頂部的偏移值就使用到了另外一個jquery函數：scrollTop();//scrollLeft()距離左端偏移值，橫向滾動條

$(window).scrollTop();

$('$aaa').scrollTop();
//同上例

$(window).scroll(function(){
     var t = $(this).scrollTop();
     if(t > 200){
         $('.top').fadeIn();
     }else{
         $('.top').fadeOut();
     }
})

根據獲取到的偏移值來設定返回頂部的a標籤的顯示和隱藏，給a標籤加入淡入淡出特效函數  fadeIn();淡入fadeOut();淡出

這時會出現一個bug，當快速的滑上滑下時，由於淡入淡出是一個緩慢展示的動畫因此當快速的上下滑動時就會出現滑動中止了，可是a標籤還在淡入淡出，動畫沒有執行完畢是不會中止的。

此時 咱們就用到另外一個函數：stop();   //中止正在執行的動畫

代碼就變成了

$(window).scroll(function(){
     var t = $(this).scrollTop();
     if(t > 200){
         $('.top').stop().fadeIn();
     }else{
         $('.top').stop().fadeOut();
     }
})

bug消除。

給返回頂部的a標籤加入點擊事件前必定要把a標籤內的herf變爲javascript:;

1 <a href="javascript:;" class="top">∧</a>

用於阻止a標籤的跳轉

加入點擊事件後，最後要作的就是在點擊事件內執行向上滾動的事件：animate();(第二個重要核心函數)

animate()函數內有兩個參數

animate({scrollTop:0},300);

這裏

scrollTop:0   表明的是滾動條滾動至距離頭部0px距離的位置//{scrollLeft:0}距離左端0px的距離同理

300   表明的是滾動時須要多長時間來完成 

當前含義就是

用300毫秒的時間使滾動條滾動至距離頭部0px的位置

$('body,html').stop().animate({scrollTop:0},300);

這裏說個注意點，在控制瀏覽器的滾動條時，由於各個瀏覽器的內核不一樣因此控制的最外層元素也就不一樣，但無論是那個內核的瀏覽器，不是針對body就是針對html，因此在這裏若是是針對瀏覽器窗口滾動條的話，爲保證各個瀏覽器都兼容，把body和html都寫在選擇器內

這樣，返回頂端的核心函數就講完了