fix: optimize judgment logic of scroll to top of page (#342)

XPoet · Jul 11, 2024 · 017540a · 017540a
1 parent ab51486
commit 017540a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/layout/_template/tools-nav.ejs b/layout/_template/tools-nav.ejs
@@ -1,14 +1,19 @@
 <%
 const btoaStr = (str) => btoa(encodeURIComponent(str)).trim().replaceAll('=', '')
-const tools_data = theme.source_data.tools
+const tools_data = theme.source_data.tools.map((x, i) => {
+  if (x.category) {
+    x.anchorId = btoaStr(x.category) + String(i)
+  }
+ return x
+})
 const tools_nav_data = theme.source_data.tools.filter((t) => t?.category)
 %>
 <div class="tools-nav-box border-box">
     <% if (tools_nav_data.length) { %>
         <ul class="tools-nav-list">
             <% for (let i = 0; i < tools_nav_data.length; i++) { %>
                 <% const tool = tools_nav_data[i] %>
-                <% const anchor_id = btoaStr(tool.category) %>
+                <% const anchor_id = tool.anchorId %>
                 <li class="tool-nav-category text-ellipsis border-box <%= anchor_id %> <%= i === 0 ? 'active' : '' %>"
                     data-anchor="<%= anchor_id %>"
                 >
@@ -21,7 +26,7 @@ const tools_nav_data = theme.source_data.tools.filter((t) => t?.category)
         <% for (let i = 0; i < tools_data.length; i++) { %>
             <% const tool = tools_data[i] %>
             <% if (tool?.category) { %>
-                <% const anchor_id = btoaStr(tool.category) %>
+                <% const anchor_id = tool.anchorId %>
                 <li class="tool-category-name text-ellipsis border-box" id="<%= anchor_id %>">
                     <span class="category-name text-ellipsis"><%= tool.category %></span>
                     <i class="fa-solid fa-chevron-down fold"></i>

diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js
@@ -16,15 +16,12 @@ KEEP.initHeaderShrink = () => {
     },
 
     headerShrink() {
-      const fullPageHeight = Math.max(
-        document.body.scrollHeight,
-        document.documentElement.scrollHeight
-      )
+      const fullPageHeight = KEEP.utils.getFullPageHeight()
       if (fullPageHeight < window.innerHeight + 2 * this.headerHeight) {
         return
       }
 
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+      const scrollTop = KEEP.utils.getScrollTop()
       const isHeaderTransparent =
         KEEP.theme_config?.first_screen?.enable === true &&
         !window.location.pathname.includes('/page/')
@@ -45,7 +42,7 @@ KEEP.initHeaderShrink = () => {
     },
 
     sideToolsBarShowHandle() {
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+      const scrollTop = KEEP.utils.getScrollTop()
       const sideToolsDom = document.querySelector('.side-tools .side-tools-container')
       if (scrollTop > this.headerHeight / 2) {
         sideToolsDom.classList.add('show')

diff --git a/source/js/page/tools-page.js b/source/js/page/tools-page.js
@@ -59,7 +59,7 @@ function toolsPageHandle() {
     }
 
     window.addEventListener('scroll', () => {
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+      const scrollTop = KEEP.utils.getScrollTop()
       toolCategoryAnchorScrollTopList.forEach((st, idx) => {
         if (scrollTop + headerHeight > st) {
           clearToolNavActive()

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -102,7 +102,7 @@ KEEP.initUtils = () => {
 
     // scroll Style Handle
     styleHandleWhenScroll() {
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+      const scrollTop = this.getScrollTop()
       const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight
       const clientHeight = window.innerHeight || document.documentElement.clientHeight
 
@@ -690,9 +690,15 @@ KEEP.initUtils = () => {
             let winScrollY = window.scrollY
             winScrollY = winScrollY <= 1 ? -19 : winScrollY
             let offset = h.getBoundingClientRect().top + winScrollY
+            const headerHeader = this.headerWrapperDom.getBoundingClientRect().height
 
             if (!this.isHideHeader) {
-              offset = offset - this.headerWrapperDom.getBoundingClientRect().height
+              offset = offset - headerHeader
+            }
+
+            const fullPageHeight = this.getFullPageHeight()
+            if (fullPageHeight <= window.innerHeight) {
+              return
             }
 
             window.anime({
@@ -723,6 +729,14 @@ KEEP.initUtils = () => {
       document.querySelectorAll('a.markdownIt-Anchor').forEach((a) => {
         this.title2Top4HTag(a, a.parentNode, 10)
       })
+    },
+
+    getScrollTop() {
+      return document.body.scrollTop || document.documentElement.scrollTop
+    },
+
+    getFullPageHeight() {
+      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
     }
   }