【JQuery】TOP移置網頁頂部動畫效果

回到網頁頂部，是很常見的功能，作法很多種，在此分享網路上的寫法，本人覺得很實用並紀錄之。

使用JQuery前，需要引用Jquery元件。

HTML（參考）：
<a href="#top" id="gotop" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-arrow-u ui-nodisc-icon ui-alt-icon ui-btn-right">Top</a>

Javascript（參考）：
<script type="text/javascript">
//回到最上層
$(function(){
//動畫方式回到上層
$("#gotop").click(function(){
    jQuery("html,body").animate({
    scrollTop:0
    },1000);
});
//目前的位置距離網頁頂端，若大於300px則顯示回上層圖示;否則隱藏
$(window).scroll(function() {
   if ( $(this).scrollTop() > 300){
      $('#gotop').fadeIn("fast");
   } else {
      $('#gotop').stop().fadeOut("fast");
   }
});
});
</script>

執行畫面（初始）︰

執行畫面（捲軸下拉）︰

註：超連結所設定的class，是引用Jquery mobile所產生的圖示，可以用Img or Div Tags來替換。