Design VS. F2E

這個是比較簡單的程式，一般來說我大部分都拿來搭配，navbar永遠在最上面的程式一起用

html 如下：

<div class="gototop">TOP</div>

CSS大部分都是造客戶想要什麼樣式做設定

CSS 如下：

.gototop{
  width:50px;
  height:50px;
  line-height:50px;
  font-family:verdana;
  text-align:center;
  background:#F63E3E;
  color:#fff;
  position:fixed;
  bottom:20px;
  right:30px;
  border-radius:50%;
  text-decoration:none;
  cursor: pointer;
  /*先隱藏*/
  display:none;
}

JavaScript 如下：

$(function(){
  
  $(window).scroll(function(){
    //var $(window).scrollTop(); 為 scroll
    var scroll = $(window).scrollTop();
    
    if( scroll >= 70){
      // 當卷軸超過70px,.gototop就淡入，如果小於就淡出
      $(".gototop").fadeIn();
      
    }else{
      
      $(".gototop").fadeOut();
      
    }
  });
  // 當我按下.gototop時，添加動畫讓卷軸跑道最上面
  $('.gototop').click(function(){
    $('html,body').animate({
      scrollTop:$('html').offset().top
    })
    
    return false;
  });

})

因為go to top 有點無聊，所以範例加上上一篇文章的JS

演示：

點選看效果