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

使用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都寫在選擇器內

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