chore(plugin): redesign back to top button

layout/plugin/back-to-top.ejs

@@ -1,22 +1,81 @@
 <% if (plugin !== false) { %>
 <% if (!head) { %>
-<div id="back-to-top" class="is-flex is-flex-center is-hidden-tablet">
+<a id="back-to-top" class="card has-text-centered" title="<%= __('plugin.backtotop') %>" href="javascript:;">
     <i class="material-icons">keyboard_arrow_up</i>
-    <span class="is-size-7">
+</a>
-        <%= __('plugin.backtotop') %></span>
+<style>
-</div>
+#back-to-top {
+    position: fixed;
+    bottom: 20px;
+    width: 64px;
+    padding: 8px 0;
+    transition: 0.4s ease opacity, 0.4s ease transform;
+    opacity: 0;
+    font-size: 0;
+    transform: translateY(120px);
+}
+#back-to-top.fade-in {
+    opacity: 1;
+}
+#back-to-top.rise-up {
+    transform: translateY(0);
+}
+@media screen and (max-width: 1087px) {
+    #back-to-top {
+        right: 1rem;
+    }
+}
+@media screen and (max-width: 768px) {
+    #back-to-top {
+        right: .75rem;
+    }
+}
+</style>
 <script>
     $(document).ready(function () {
+        var $button = $('#back-to-top');
+        var $mainColumn = $('.main .has-order-2');
+        var $leftColumn = $('.main .has-order-1');
+        var $rightColumn = $('.main .has-order-3');
         var lastScrollTop = 0;
-        $(window).scroll(function (event) {
+
-            var scrollTop = $(this).scrollTop();
+        function update() {
-            if (scrollTop > lastScrollTop || scrollTop === 0) {
+            // desktop mode or tablet mode with only right sidebar enabled
-                $('#back-to-top').removeClass('is-active');
+            if (window.innerWidth > 1077 || (window.innerWidth > 768 && $leftColumn.length === 0 && $rightColumn.length === 1)) {
+                var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
+                var left = $mainColumn.offset().left + $mainColumn.outerWidth() + padding;
+                left = Math.min(left, document.documentElement.clientWidth - $button.outerWidth(true) - padding);
+                $button.css('left', left);
+                var minScrollTop = 0;
+                if ($rightColumn.length > 0) {
+                    minScrollTop = Math.max.apply(null, $rightColumn.find('.widget').map(function () {
+                        return $(this).offset().top + $(this).outerHeight(true);
+                    }));
+                }
+                if ($(window).scrollTop() + $(window).height() >= minScrollTop + padding + $button.outerHeight(true)) {
+                    $button.addClass('fade-in');
+                } else {
+                    $button.removeClass('fade-in');
+                }
+                $button.addClass('rise-up');
             } else {
-                $('#back-to-top').addClass('is-active');
+                // mobile and tablet mode
+                $button.addClass('fade-in');
+                $button.css('left', '');
+                var scrollTop = $(window).scrollTop();
+                if (scrollTop > lastScrollTop || scrollTop === 0) {
+                    $('#back-to-top').removeClass('rise-up');
+                } else {
+                    $('#back-to-top').addClass('rise-up');
+                }
+                lastScrollTop = scrollTop;
             }
-            lastScrollTop = scrollTop;
+        }
-        });
+
+        update();
+        $(window).resize(update);
+        $(window).scroll(update);
+
         $('#back-to-top').on('click', function () {
             $('body, html').animate({ scrollTop: 0 }, 400);
         });

source/css/style.styl

@@ -160,21 +160,6 @@ img.thumbnail
                 margin-left: 0.75rem
                 margin-right: 0
 
-#back-to-top
-    position: fixed
-    bottom: 0
-    left: 0
-    right: 0
-    text-align: center
-    background: white
-    box-shadow: 0 -1px 8px rgba(0,0,0,0.1)
-    padding: 8px 0
-    line-height: 24px
-    transform: translateY(100px)
-    transition: 0.4s ease
-    &.is-active
-        transform: translateY(0)
-
 /* ---------------------------------
  *         Custom modifiers
  * --------------------------------- */