redesign button toTop, show or hide automatically when scroll the page

layout/common/sidebar.ejs

@@ -2,5 +2,5 @@
     <% theme.widgets.forEach(function(widget) { %>
         <%- partial('widget/' + widget) %>
     <% }) %>
-    <div id="toTop" class="fa fa-chevron-up"></div>
+    <div id="toTop" class="fa fa-angle-up"></div>
 </aside>

source/css/_partial/sidebar.styl

@@ -84,25 +84,27 @@
 
 #toTop
     @extend $block
+    display: none
     cursor: pointer
     text-align: center
-    width: 64px
-    height: 64px
+    width: 60px
+    height: 60px
     color: white
-    font-size: 32px
-    line-height: 64px
+    font-size: 50px
+    line-height: 55px
     background: color-default
-    border-radius: 4px
+    opacity: 0.8
+    border-radius: 50px
     @media mq-mobile
-        width: 54px
-        height: 54px
-        font-size: 28px
-        line-height: 54px
+        width: 52px
+        height: 52px
+        font-size: 34px
+        line-height: 52px
     @media mq-mini
-        width: 54px
-        height: 54px
-        font-size: 28px
-        line-height: 54px
+        width: 48px
+        height: 48px
+        font-size: 32px
+        line-height: 48px
     &.fix
         bottom: 20px
         position: fixed

source/js/main.js

@@ -36,13 +36,16 @@
     // To Top
     $(document).on('scroll', function () {
         if ($(document).width() >= 800) {
-            if($(this).scrollTop() > toTop) {
+            if($(this).scrollTop() > 100) {
+                $('#toTop').fadeIn();
                 $('#toTop').addClass('fix');
                 $('#toTop').css('left', $('#sidebar').offset().left);
             } else {
+                $('#toTop').fadeOut();
                 $('#toTop').removeClass('fix');
             }
         } else {
+            $('#toTop').fadeIn();
             $('#toTop').addClass('fix');
             $('#toTop').css('right', 20);
         }