feat: add scroll style settings in _config.yml

_config.yml

@@ -37,9 +37,15 @@ style:
   # First screen
   first_screen:
     enable: false
-    background_img: /images/bg.svg
+    background_img: /images/bg.svg   # You can use local image or image external link
     description: Keep writing and Keep loving.
 
+  scroll:
+    progress_bar:
+      enable: false
+    percent:
+      enable: false
+
 
 # ---------------------------------------------------------------------------------------
 # Social contact link

layout/_partial/pjax/pjax.ejs

@@ -17,13 +17,12 @@
             // scrollTo: true,
         });
 
-
         document.addEventListener('pjax:send', () => {
-            KEEP.utils.loadingProgressBarStart();
+            KEEP.utils.pjaxProgressBarStart();
         });
 
         document.addEventListener('pjax:complete', () => {
-            KEEP.utils.loadingProgressBarEnd();
+            KEEP.utils.pjaxProgressBarEnd();
             pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
             KEEP.refresh();
         });

layout/_partial/progress-bar.ejs

@@ -1,5 +1,7 @@
 <div class="progress-bar-container">
-    <span class="scroll-progress-bar"></span>
+    <% if (theme.style.scroll.progress_bar.enable === true) { %>
+        <span class="scroll-progress-bar"></span>
+    <% } %>
 
     <% if (theme.pjax.enable === true) { %>
         <span class="pjax-progress-bar"></span>

layout/_partial/side-tools.ejs

@@ -1,5 +1,4 @@
 <div class="side-tools-container">
-
     <ul class="side-tools-list">
         <li class="tools-item tool-font-adjust-plus flex-center">
             <i class="fas fa-search-plus"></i>
@@ -29,18 +28,26 @@
             </li>
         <% } %>
 
-        <li class="tools-item tool-scroll-to-top flex-center">
+        <% if (theme.style.scroll.percent.enable !== true) { %>
-            <i class="fas fa-arrow-up"></i>
+            <li class="tools-item tool-scroll-to-top flex-center">
-        </li>
+                <i class="fas fa-arrow-up"></i>
+            </li>
+        <% } %>
 
         <li class="tools-item tool-scroll-to-bottom flex-center">
             <i class="fas fa-arrow-down"></i>
         </li>
     </ul>
 
-    <ul>
+    <ul class="exposed-tools-list">
         <li class="tools-item tool-toggle-show flex-center">
             <i class="fas fa-cog fa-spin"></i>
         </li>
+        <% if (theme.style.scroll.percent.enable === true) { %>
+            <li class="tools-item tool-scroll-to-top flex-center">
+                <i class="arrow-up fas fa-arrow-up"></i>
+                <span class="percent"></span>
+            </li>
+        <% } %>
     </ul>
 </div>

source/css/layout/_partial/progress-bar.styl

@@ -5,64 +5,73 @@
   width: 100%;
   z-index: $z-index-9;
 
-  .pjax-progress-bar {
+  if (hexo-config('pjax.enable') == true) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 2px;
-    width: 0;
-    background: var(--pjax-progress-bar-color);
-    visibility: hidden;
-    opacity: 0;
-    z-index: $z-index-8;
-    transition();
 
-    &.show {
+    .pjax-progress-bar {
-      transition();
+      position: absolute;
-      opacity: 1;
+      top: 0;
-      visibility: visible;
+      left: 0;
-    }
+      height: 2px;
-  }
+      width: 0;
-
+      background: var(--pjax-progress-bar-color);
-
-  .pjax-progress-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: $z-index-8;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 8px 0 0;
-    color: var(--default-text-color);
-    visibility: hidden;
-    transition();
-
-    &.show {
-      transition: visibility 0.1s linear;
-      visibility: visible;
-    }
-
-    i {
-      font-size: 1.12rem;
-    }
-  }
-
-
-  .scroll-progress-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: $scroll-progress-bar-height;
-    visibility: hidden;
-    background: var(--primary-color);
-    transition: all 0.1s ease;
-    z-index: $z-index-7;
-
-    &.hide {
-      transition: none;
       visibility: hidden;
+      opacity: 0;
+      z-index: $z-index-8;
+      transition();
+
+      &.show {
+        transition();
+        opacity: 1;
+        visibility: visible;
+      }
     }
+
+
+    .pjax-progress-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: $z-index-8;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 8px 0 0;
+      color: var(--default-text-color);
+      visibility: hidden;
+      transition();
+
+      &.show {
+        transition: visibility 0.1s linear;
+        visibility: visible;
+      }
+
+      i {
+        font-size: 1.12rem;
+      }
+    }
+
+
+  }
+
+  if (hexo-config('style.scroll.progress_bar.enable') == true) {
+
+    .scroll-progress-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: $scroll-progress-bar-height;
+      visibility: hidden;
+      background: var(--primary-color);
+      transition: all 0.1s ease;
+      z-index: $z-index-7;
+
+      &.hide {
+        //transition: none;
+        display: none;
+        //visibility: hidden !important;
+      }
+    }
+
   }
 }

source/css/layout/_partial/side-tools.styl

@@ -62,10 +62,45 @@ $tools-item-border-radius = 1px;
       }
     }
 
+
     &.show {
       opacity: 1;
       transform: translateX(0);
     }
   }
 
+
+  .exposed-tools-list {
+
+    if (hexo-config('style.scroll.percent.enable') == true) {
+      .tool-scroll-to-top {
+        display: none;
+
+        &:hover {
+          transition();
+
+          .arrow-up {
+            display: flex;
+          }
+
+          .percent {
+            display: none;
+          }
+        }
+
+
+        .arrow-up {
+          display: none;
+        }
+
+
+        .percent {
+          display: flex;
+          font-size: 1rem;
+        }
+
+      }
+
+    }
+  }
 }

source/js/back2top.js

@@ -4,7 +4,6 @@ KEEP.initBack2Top = () => {
 
     ...KEEP.utils,
 
-    back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
     back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'),
 
     back2top() {

source/js/utils.js

@@ -9,25 +9,39 @@ KEEP.initUtils = () => {
     scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
     pjaxProgressBar_dom: document.querySelector('.pjax-progress-bar'),
     pjaxProgressIcon_dom: document.querySelector('.pjax-progress-icon'),
+    back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
 
     innerHeight: window.innerHeight,
-    loadingProgressBarTimer: null,
+    pjaxProgressBarTimer: null,
     prevScrollValue: 0,
     defaultFontSize: 0,
 
+    isHasScrollProgressBar: KEEP.theme_config.style.scroll.progress_bar.enable === true,
+    isHasScrollPercent: KEEP.theme_config.style.scroll.percent.enable === true,
+
     // Scroll Style Handle
     styleHandleWhenScroll() {
       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 (this.scrollProgressBar_dom) {
+      if (this.isHasScrollProgressBar) {
+        const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
         this.scrollProgressBar_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
         this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`;
       }
 
+      if (this.isHasScrollPercent) {
+        const percent_dom = this.back2TopButton_dom.querySelector('.percent');
+        if (percent === '0') {
+          this.back2TopButton_dom.style.display = 'none';
+        } else {
+          this.back2TopButton_dom.style.display = 'flex';
+          percent_dom.innerHTML = percent;
+        }
+      }
+
       // hide header handle
       if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
         this.pageTop_dom.classList.add('hide');
@@ -41,7 +55,9 @@ KEEP.initUtils = () => {
     registerWindowScroll() {
       window.addEventListener('scroll', () => {
         // style handle when scroll
-        this.styleHandleWhenScroll();
+        if (this.isHasScrollPercent || this.isHasScrollProgressBar) {
+          this.styleHandleWhenScroll();
+        }
 
         // TOC scroll handle
         if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
@@ -238,19 +254,22 @@ KEEP.initUtils = () => {
     },
 
     // loading progress bar start
-    loadingProgressBarStart() {
+    pjaxProgressBarStart() {
-      this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
+      this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
+      if (this.isHasScrollProgressBar) {
+        this.scrollProgressBar_dom.classList.add('hide');
+      }
+
       this.pjaxProgressBar_dom.style.width = '0';
-      this.scrollProgressBar_dom.classList.add('hide');
       this.pjaxProgressIcon_dom.classList.add('show');
 
-      let width = 5;
+      let width = 1;
       const maxWidth = 99;
 
       this.pjaxProgressBar_dom.classList.add('show');
       this.pjaxProgressBar_dom.style.width = width + '%';
 
-      this.loadingProgressBarTimer = setInterval(() => {
+      this.pjaxProgressBarTimer = setInterval(() => {
         width += 5;
         if (width > maxWidth) width = maxWidth;
         this.pjaxProgressBar_dom.style.width = width + '%';
@@ -258,14 +277,17 @@ KEEP.initUtils = () => {
     },
 
     // loading progress bar end
-    loadingProgressBarEnd() {
+    pjaxProgressBarEnd() {
-      this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
+      this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
       this.pjaxProgressBar_dom.style.width = '100%';
 
       const tempTimeout = setTimeout(() => {
         this.pjaxProgressBar_dom.classList.remove('show');
         this.pjaxProgressIcon_dom.classList.remove('show');
-        this.scrollProgressBar_dom.classList.remove('hide');
+
+        if (this.isHasScrollProgressBar) {
+          this.scrollProgressBar_dom.classList.remove('hide');
+        }
         clearTimeout(tempTimeout);
       }, 200);
     }