zhangdocs 1.1.27 → 1.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zhangdocs",
-    "version": "1.1.27",
+    "version": "1.1.29",
     "description": "Simple document generation tool. Dependence Node.js run.",
     "repository": {
         "type": "git",

package/theme/handbook/layout.ejs

@@ -52,6 +52,13 @@
     </div>
   </div>
 
+  <!-- 滚动到底部按钮 -->
+  <button class="scroll-to-bottom" id="scroll-to-bottom" aria-label="滚动到底部" title="滚动到底部">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M6 9l6 6 6-6"></path>
+    </svg>
+  </button>
+
   <!-- Token输入弹窗 -->
   <div id="token-modal"
 style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: none; justify-content: center; align-items: center;">
@@ -163,12 +170,28 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           // Token正确，立即显示内容
           const mainContainer = document.getElementById('main-container');
           const menuIcon = document.getElementById('menu-icon');
+          const scrollToBottomBtn = document.getElementById('scroll-to-bottom');
           if (mainContainer) mainContainer.style.display = 'block';
           if (menuIcon) {
             menuIcon.style.display = 'flex';
             // 菜单图标显示后，初始化菜单功能
             setTimeout(initMenuPopup, 50);
           }
+          // 初始化滚动到底部按钮
+          if (scrollToBottomBtn) {
+            setTimeout(function() {
+              scrollToBottomBtn.style.display = 'flex';
+              // 检查是否需要显示按钮
+              setTimeout(function() {
+                var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                var scrollHeight = document.documentElement.scrollHeight;
+                var clientHeight = document.documentElement.clientHeight;
+                if (scrollHeight - scrollTop - clientHeight > 5) {
+                  scrollToBottomBtn.classList.add('show');
+                }
+              }, 200);
+            }, 100);
+          }
         }
       })();
 
@@ -219,6 +242,22 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           // 菜单图标显示后，初始化菜单功能
           setTimeout(initMenuPopup, 50);
         }
+        // 显示内容后，初始化滚动到底部按钮
+        setTimeout(function() {
+          var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+          if (scrollToBottomBtn) {
+            scrollToBottomBtn.style.display = 'flex';
+            // 检查是否需要显示按钮
+            setTimeout(function() {
+              var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+              var scrollHeight = document.documentElement.scrollHeight;
+              var clientHeight = document.documentElement.clientHeight;
+              if (scrollHeight - scrollTop - clientHeight > 5) {
+                scrollToBottomBtn.classList.add('show');
+              }
+            }, 100);
+          }
+        }, 100);
       }
 
       // 隐藏内容
@@ -449,5 +488,95 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
         }
       });
     })();
+    
+    // 滚动到底部功能
+    (function() {
+      function initScrollToBottom() {
+        var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+        if (!scrollToBottomBtn) {
+          return;
+        }
+        
+        // 确保按钮可见（如果内容已显示）
+        var mainContainer = document.getElementById('main-container');
+        if (mainContainer && mainContainer.style.display !== 'none') {
+          scrollToBottomBtn.style.display = 'flex';
+        }
+        
+        // 检查是否在页面底部
+        function isAtBottom() {
+          var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+          var scrollHeight = document.documentElement.scrollHeight;
+          var clientHeight = document.documentElement.clientHeight;
+          // 允许5px的误差
+          return scrollHeight - scrollTop - clientHeight <= 5;
+        }
+        
+        // 显示/隐藏按钮
+        function toggleButton() {
+          // 确保按钮可见
+          if (mainContainer && mainContainer.style.display !== 'none') {
+            scrollToBottomBtn.style.display = 'flex';
+          }
+          
+          if (isAtBottom()) {
+            scrollToBottomBtn.classList.remove('show');
+          } else {
+            scrollToBottomBtn.classList.add('show');
+          }
+        }
+        
+        // 滚动到底部
+        function scrollToBottom() {
+          window.scrollTo({
+            top: document.documentElement.scrollHeight,
+            behavior: 'smooth'
+          });
+        }
+        
+        // 绑定点击事件
+        scrollToBottomBtn.addEventListener('click', function(e) {
+          e.preventDefault();
+          scrollToBottom();
+        });
+        
+        // 监听滚动事件
+        var scrollTimer = null;
+        window.addEventListener('scroll', function() {
+          // 使用节流，减少频繁检查
+          if (scrollTimer) {
+            clearTimeout(scrollTimer);
+          }
+          scrollTimer = setTimeout(toggleButton, 100);
+        }, { passive: true });
+        
+        // 初始检查
+        setTimeout(toggleButton, 300);
+        
+        // 监听内容变化（处理动态加载的内容）
+        var observer = new MutationObserver(function() {
+          setTimeout(toggleButton, 100);
+        });
+        
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true
+        });
+      }
+      
+      // 立即尝试初始化
+      initScrollToBottom();
+      
+      // DOM加载完成后初始化
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initScrollToBottom);
+      } else {
+        setTimeout(initScrollToBottom, 100);
+      }
+      
+      // 延迟初始化（处理动态显示的情况）
+      setTimeout(initScrollToBottom, 500);
+      setTimeout(initScrollToBottom, 1000);
+    })();
   </script>
   <% include footer.ejs %>

package/theme/handbook/source/css/main.styl

@@ -512,4 +512,57 @@ table
         
         .nav-button
             max-width: 100%
-            width: 100%
+            width: 100%
+
+// 滚动到底部按钮
+.scroll-to-bottom
+    position: fixed
+    bottom: 30px
+    right: 30px
+    width: 48px
+    height: 48px
+    background: #fff
+    border: 1px solid $border-color
+    border-radius: 50%
+    cursor: pointer
+    z-index: 999
+    display: none
+    align-items: center
+    justify-content: center
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
+    transition: all 0.3s ease
+    color: $text-color
+    padding: 0
+    -webkit-tap-highlight-color: transparent
+    opacity: 0
+    visibility: hidden
+    
+    &:hover
+        background: $primary-color
+        border-color: $primary-color
+        color: #fff
+        transform: translateY(-3px)
+        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4)
+    
+    &:active
+        transform: translateY(-1px)
+        box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3)
+    
+    svg
+        width: 20px
+        height: 20px
+    
+    &.show
+        display: flex
+        opacity: 1
+        visibility: visible
+    
+    @media mq-mobile
+        bottom: 20px
+        right: 20px
+        width: 44px
+        height: 44px
+        
+        svg
+            width: 18px
+            height: 18px