feat: add page browsing progress at the top of header

layout/page.ejs

@@ -55,8 +55,9 @@
             <div class="scroll-to-top">
                 <ul>
                     <li>
-                        <!--<i class="fa fa-caret-up"></i>-->
+                        <span class="scroll-percent">
-                        <span class="scroll-percent"></span>
+                            <i class="fa fa-caret-up"></i>
+                        </span>
                     </li>
                 </ul>
             </div>

source/css/layout/_partial/header.styl

@@ -2,6 +2,8 @@
 @require "../common/magic-theme.styl";
 @require "../common/animated.styl";
 
+$header-progress-height = 2.8px;
+
 .header-wrapper {
   width: 100%;
   height: 100%;
@@ -10,18 +12,21 @@
   align-items: center;
   justify-content: center;
   background: var(--background-color);
+  padding-top: $header-progress-height;
 
   if (hexo-config('magic.enable') == true) {
     magic-style(1.02, 1.02);
   }
 
   .header-progress {
+    display: none;
     position: absolute;
-    width: 100%;
+    width: 0;
-    height: 3px;
+    height: $header-progress-height;
     top: 0;
     left: 0;
-    background: $primary-color;
+    background: var(--primary-color);
+    transition: all 0.1s ease;
   }
 
 

source/css/layout/home-content.styl

@@ -28,6 +28,7 @@
         font-weight: 600;
         color: var(--second-text-color);
         font-size: 1.5em;
+        line-height: 1.5em;
 
         +ils-tablet() {
           font-size: 1.3em;

source/js/scroll-to-top.js

@@ -1,7 +1,8 @@
 (function () {
     const scrollToTopDom = document.querySelector('.scroll-to-top');
+    const headerProgressDom = document.querySelector('.header-progress');
 
-    scrollToTopDom.addEventListener('click', () => {
+    const backToTop = () => {
         let scrollTopTimer = setInterval(function () {
             let top = document.body.scrollTop || document.documentElement.scrollTop;
             let speed = top / 2;
@@ -14,21 +15,30 @@
                 clearInterval(scrollTopTimer);
             }
         }, 30);
+    };
+
+    scrollToTopDom.addEventListener('click', () => {
+        backToTop();
     });
 
     window.addEventListener('scroll', function (_e) {
-        // back to top
+        // back to top & show scroll percent
-        // 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);
+        const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
+
         if (percent === '0') {
             scrollToTopDom.style.display = 'none';
+            headerProgressDom.style.display = 'none';
         } else {
             scrollToTopDom.style.display = 'block';
-            scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
+            // scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
+
+            headerProgressDom.style.display = 'block';
+            headerProgressDom.style.width = `${ProgressPercent}%`;
         }
     });
 
-})();
+})();