redesign button toTop, show or hide button improved (#137)

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

* redesign button toTop, show or hide button improved

* button toTop with border-radius 4

layout/common/sidebar.ejs

@@ -1,6 +1,6 @@
 <aside id="sidebar">
-    <% theme.widgets.forEach(function(widget) { %>
+   <% 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,28 +84,30 @@
 
 #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
+    opacity: 0.8
     border-radius: 4px
+    bottom: 20px
+    position: fixed
     @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
-    &.fix
-        bottom: 20px
-        position: fixed
+        width: 48px
+        height: 48px
+        font-size: 32px
+        line-height: 48px
+   
 
 #recent-post
     li

source/js/main.js

@@ -1,6 +1,5 @@
 (function($){
-    var toTop = $('#toTop').length ? $('#toTop').offset().top - $(window).height() + 20 : 0;
-
+    var toTop = ($('#sidebar').height() - $(window).height()) + 60;
     // Caption
     $('.article-entry').each(function(i){
         $(this).find('img').each(function(){
@@ -36,14 +35,14 @@
     // To Top
     $(document).on('scroll', function () {
         if ($(document).width() >= 800) {
-            if($(this).scrollTop() > toTop) {
-                $('#toTop').addClass('fix');
+            if(($(this).scrollTop() > toTop) && ($(this).scrollTop() > 0)) {    
+                $('#toTop').fadeIn();
                 $('#toTop').css('left', $('#sidebar').offset().left);
             } else {
-                $('#toTop').removeClass('fix');
+                $('#toTop').fadeOut();
             }
         } else {
-            $('#toTop').addClass('fix');
+            $('#toTop').fadeIn();
             $('#toTop').css('right', 20);
         }
     }).on('click', '#toTop', function () {