jQuery 動畫功能是能夠快速作出許多特效，也是初學階段可以快速地讓初學者建立信心的方法。這篇文章的範例是回到頁首的按鈕，這個按鈕常常在許多部落格文章上常見，用來把頁面捲回最頂端，用 jQuery animate 就能輕鬆做到效果。

範例

HTML 部分就是一篇很長的文章包在 article 標籤裡面，另外有一個 scroll-top 的 div 用來製作回到頁首的按鈕。

CSS 部分就是利用 position: fixed 來讓按鈕固定在右下角。

HTML

  <article class="article">
    ...
    ...
    ...
  </article>
  <div class="scroll-top">
    <i class="fa fa-angle-up"></i>
  </div>

CSS

.scroll-top {
  width: 40px;
  height: 40px;
  background: #333;
  color: #f1f1f1;
  font-size: 1.5em;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  /* 永遠固定在頁面上 */
  position: fixed;
  right: 20px;
  bottom: 80px;
}

JS

$(document).ready(function() {
  $(".scroll-top").on('click', function(){
    console.log('click');
//     $('html,body').scrollTop(0);
    $("html,body").animate({scrollTop: 0}, 1000);
  });
  $(window).on('scroll',function() {
    console.log($(this).scrollTop());
    if ( $(this).scrollTop() > 200){
      $('.scroll-top').fadeIn("fast");
    } else {
      $('.scroll-top').stop().fadeOut("fast");
    }
  });
});

.scrollTop(value)

scrollTop() 可以取得目前距離頂端有多遠，在這個範例中我們有使用監聽滾輪捲動 scroll 的事件（第 7 行），因此看到第 8 行則可以看到我們一偵測到捲動即在 console 中印出現在距離頂端的距離。當距離頂端 200px 以上時就會讓回到頁首的按鈕顯示出來。

另外將數值帶入，就可以直接到指定位置，可以試著把已經註解掉的第 4 行程式碼打開並且把第 5 行註解起來，測試就會發現當執行 .scrollTop(0) 捲軸會瞬間回到頂端，帶入不同的值就會到不同的地方。

.animate(properties, options)

properties 帶入 類似 CSS 的樣式效果

回到頂端的範例我們帶入 {scrollTop: 0} ，內容的撰寫很像 CSS 的樣式效果，還可以設定高度、寬度、透明度等...

options 帶入變化時間

options 可以帶入毫秒數，或是 fast, slow 變化時間

耗效能，已經要漸漸被 CSS3 取代，舊款 IE 瀏覽器就靠它

jQuery 動畫是每個很小的間隔時間去變動 CSS 達到動畫效果，可以讓許多不支援 CSS3 的瀏覽器也可以支援相同的動畫效果，不過現在 CSS3 漸漸普及，jQuery 動畫的效能低落也讓開發者越來越少使用它。

.stop() 可以暫停動畫

動畫會完全播放完畢才會進行下一個動作，所以當撰寫程式時如果可以連續點擊 animate 效果時會造成動畫效果塞車，比較好的做法是使用 stop() 先將原先的動畫效果停止，再執行第二個動畫效果。在範例中第 12 行就有用到這個方法。

.fadeIn(), .fadeOut()

淡出、淡入效果，掌管透明度

有快慢、秒數可以設定

跟動畫差不多，.stop() 可以中斷效果

相似的還有 .fadeTo(), .fadeToggle()