refactor: fetch out 'back to top' module & modified its style

layout/_partial/scripts.ejs

@@ -1,10 +1,13 @@
 <%- js([
     'js/main.js',
     'js/header-shrink.js',
-    'js/toggle-mode.js',
+    'js/toggle-mode.js'
-    'js/scroll-to-top.js'
 ]) %>
 
+<% if (theme.back2top.enable) { %>
+    <%- js('js/scroll-to-top.js') %>
+<% } %>
+
 <% if (is_post()) { %>
 
     <% if (theme.codeblock.copy_button.enable) { %>

layout/_partial/tools.ejs

@@ -11,6 +11,7 @@
         </li>
         <% if (theme.local_search.enable) { %>
             <li class="rss">
+                <!-- TODO -->
                 <a href="<%= config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
             </li>
         <% } %>

layout/page.ejs

@@ -39,11 +39,16 @@
             <%- partial('_partial/tools') %>
         </div>
 
-        <div class="scroll-to-top">
+        <% if (theme.back2top.enable) { %>
-            <span class="scroll-percent"></span>
+            <div class="scroll-to-top">
-            <button><i class="fa fa-caret-up"></i></button>
+                <ul>
-        </div>
+                    <li>
-
+                        <!--<i class="fa fa-caret-up"></i>-->
+                        <span class="scroll-percent"></span>
+                    </li>
+                </ul>
+            </div>
+        <% } %>
     </div>
 
     <div class="page-bottom">

source/css/layout/_partial/tools.styl

@@ -26,6 +26,13 @@ $li-margin-bottom = 10px;
         border: 1px solid var(--third-text-color);
       }
 
+      &:hover {
+        transition();
+        color: var(--background-color);
+        background: var(--primary-color);
+      }
+
+
       &.rss {
         padding: 0;
 
@@ -47,12 +54,6 @@ $li-margin-bottom = 10px;
       }
 
 
-      &:hover {
-        transition();
-        color: var(--background-color);
-        background: var(--primary-color);
-      }
-
       &:last-child {
         margin-bottom: 0;
       }

source/css/layout/common/animated.styl

@@ -37,7 +37,6 @@ the-transition-ease-out() {
     transform: translateY(0);
   }
 }
-
 .title-hover-animation {
   display: inline-block;
   position: relative;
@@ -64,4 +63,4 @@ the-transition-ease-out() {
     transform: scaleX(1);
   }
 
-}
+}

source/css/layout/page.styl

@@ -58,12 +58,16 @@ $component-interspace = 30px;
     .sidebar-tools {
       position: fixed;
       top: $header-height + $component-interspace;
-      left: ((100% - $main-content-width) / 4);
+      if (hexo-config('side-tools.position') == left) {
+        left: ((100% - $main-content-width) / 4);
+      } else {
+        right: ((100% - $main-content-width) / 4);
+      }
       transition();
     }
 
 
-    .scroll-to-top {
+    /*.scroll-to-top {
       display: none;
       position: fixed;
       right: ((100% - $main-content-width) / 4);
@@ -82,6 +86,44 @@ $component-interspace = 30px;
         }
       }
     }
+*/
+
+    .scroll-to-top {
+      display: none;
+      position: fixed;
+
+      if (hexo-config('back2top.position') == left) {
+        left: ((100% - $main-content-width) / 4);
+      } else {
+        right: ((100% - $main-content-width) / 4);
+      }
+      bottom: $component-interspace;
+
+      li {
+        cursor: pointer;
+        padding: 2px;
+        width: 32px;
+        height: 30px;
+        border-radius: 5px;
+        font-size: 0.9em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--background-color);
+
+        if (hexo-config('magic.enable') == true) {
+          magic-style(1.1);
+        } else {
+          border: 1px solid var(--third-text-color);
+        }
+
+        &:hover {
+          transition();
+          color: var(--background-color);
+          background: var(--primary-color);
+        }
+      }
+    }
   }
 
   .page-bottom {
@@ -111,16 +153,28 @@ $component-interspace = 30px;
   }
 
   .sidebar-tools {
-    left: 2% !important;
+    if (hexo-config('side-tools.position') == left) {
-    transform-origin: right top;
+      left: 2% !important;
+      transform-origin: left top;
+    } else {
+      right: 2% !important;
+      transform-origin: right top;
+    }
     transform: scale(0.8);
   }
 
   //.sidebar-toc {
   //  right: 2% !important;
   //}
-  //.scroll-to-top {
+  .scroll-to-top {
-  //  right: 2% !important;
+    if (hexo-config('back2top.position') == left) {
-  //}
+      left: 2% !important;
+      transform-origin: left bottom;
+    } else {
+      right: 2% !important;
+      transform-origin: right bottom;
+    }
+    transform: scale(0.8);
+  }
 
 }

source/js/header-shrink.js

@@ -3,7 +3,6 @@ const headerDom = document.querySelector('.header-wrapper');
 const menuBarDom = document.querySelector('.menu-bar');
 const windowMaskDom = document.querySelector('.window-mask');
 const scrollPercentDom = document.querySelector('.scroll-percent');
-const scrollToTopDom = document.querySelector('.scroll-to-top');
 
 let isHeaderShrink = false;
 const headerHeight = headerDom.getBoundingClientRect().height;
@@ -19,21 +18,6 @@ window.addEventListener('scroll', function (_e) {
         headerDom.classList.remove('header-wrapper-shrink');
         pageTemplateDom.classList.remove('page-top-shrink');
     }
-
-    // show scroll percent
-    const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
-    const clientHeight = window.innerHeight || document.documentElement.clientHeight;
-    const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
-
-
-    if (percent === '0') {
-        scrollToTopDom.style.display = 'none';
-    } else {
-        scrollToTopDom.style.display = 'block';
-        scrollPercentDom.innerHTML = percent + '%';
-    }
-
-
 });
 
 

source/js/scroll-to-top.js

@@ -1,14 +1,34 @@
-scrollToTopDom.addEventListener('click', () => {
+(function () {
-    let scrollTopTimer = setInterval(function () {
+    const scrollToTopDom = document.querySelector('.scroll-to-top');
-        let top = document.body.scrollTop || document.documentElement.scrollTop;
+
-        let speed = top / 3;
+    scrollToTopDom.addEventListener('click', () => {
-        if (document.body.scrollTop !== 0) {
+        let scrollTopTimer = setInterval(function () {
-            document.body.scrollTop -= speed;
+            let top = document.body.scrollTop || document.documentElement.scrollTop;
+            let speed = top / 2;
+            if (document.body.scrollTop !== 0) {
+                document.body.scrollTop -= speed;
+            } else {
+                document.documentElement.scrollTop -= speed;
+            }
+            if (top === 0) {
+                clearInterval(scrollTopTimer);
+            }
+        }, 30);
+    });
+
+    window.addEventListener('scroll', function (_e) {
+        // back to top
+        // show scroll percent
+        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+        const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
+        const clientHeight = window.innerHeight || document.documentElement.clientHeight;
+        const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
+        if (percent === '0') {
+            scrollToTopDom.style.display = 'none';
         } else {
-            document.documentElement.scrollTop -= speed;
+            scrollToTopDom.style.display = 'block';
+            scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
         }
-        if (top === 0) {
+    });
-            clearInterval(scrollTopTimer);
+
-        }
+})();
-    }, 30);
-});