perf: optimize back2Top display logic

XPoet · Sep 25, 2023 · da77c5c · da77c5c
1 parent 8235b96
commit da77c5c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 26 deletions.
diff --git a/layout/_partial/side-tools.ejs b/layout/_partial/side-tools.ejs
@@ -46,8 +46,8 @@
             <i class="fas fa-cog fa-spin"></i>
         </li>
 
-        <li class="tools-item tool-scroll-to-top flex-center">
-            <i class="arrow-up fas fa-arrow-up"></i>
+        <li class="tools-item tool-scroll-to-top flex-center show-arrow">
+            <i class="arrow fas fa-arrow-up"></i>
             <span class="percent"></span>
         </li>
     </ul>

diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl
@@ -75,43 +75,51 @@ $tools-item-border-radius = 0.2rem
 
 
   .exposed-tools-list {
-    if (hexo-config('style') && hexo-config('style.scroll') && hexo-config('style.scroll.percent') == true) {
-      .tool-scroll-to-top {
-        display none
 
-        &.show {
-          display flex
-        }
+    .tool-scroll-to-top {
+      display none
+
+      &.show {
+        display flex
+      }
 
-        &.show-arrow-up {
-          .percent {
-            display none
-          }
 
-          .arrow-up {
-            display flex
-          }
+      &.show-arrow {
+        .percent {
+          display none
         }
 
-        &:hover {
-          .percent {
-            display none
-          }
+        .arrow {
+          display flex
+        }
+      }
 
-          .arrow-up {
-            display flex
-          }
+
+      &.show-percent {
+        .percent {
+          display flex
         }
 
-        .arrow-up {
+        .arrow {
           display none
         }
+      }
+
 
+      &:hover {
         .percent {
+          display none
+        }
+
+        .arrow {
           display flex
-          font-size 1rem
         }
       }
+
+
+      .percent {
+        font-size 1rem
+      }
     }
   }
 }
diff --git a/source/js/utils.js b/source/js/utils.js
@@ -41,23 +41,33 @@ KEEP.initUtils = () => {
 
       const percent = Math.round((scrollTop / (scrollHeight - clientHeight)) * 100) || 0
 
+      // back to top
+      if (scrollTop > 10) {
+        this.back2TopBtn.classList.add('show')
+      } else {
+        this.back2TopBtn.classList.remove('show')
+      }
+
+      // scroll progress bar
       if (this.isHasScrollProgressBar && this.scrollProgressBarDom) {
         const progressPercent = ((scrollTop / (scrollHeight - clientHeight)) * 100).toFixed(3)
         this.scrollProgressBarDom.style.visibility = percent === 0 ? 'hidden' : 'visible'
         this.scrollProgressBarDom.style.width = `${progressPercent}%`
       }
 
+      // scroll percent
       if (this.isHasScrollPercent && this.back2TopBtn) {
+        this.back2TopBtn.classList.add('show-percent')
         const percentDom = this.back2TopBtn.querySelector('.percent')
         if (percent === 0 || percent === undefined) {
           this.back2TopBtn.classList.remove('show')
         } else {
           this.back2TopBtn.classList.add('show')
           percentDom.innerHTML = percent.toFixed(0)
           if (percent > 99) {
-            this.back2TopBtn.classList.add('show-arrow-up')
+            this.back2TopBtn.classList.add('show-arrow')
           } else {
-            this.back2TopBtn.classList.remove('show-arrow-up')
+            this.back2TopBtn.classList.remove('show-arrow')
           }
         }
       }
@@ -79,6 +89,7 @@ KEEP.initUtils = () => {
           }
         }
       }
+
       this.prevScrollValue = scrollTop
     },