feat: 添加首页固定“下一篇文章”按钮

Co-authored-by: aider (deepseek/deepseek-v4-pro) <aider@aider.chat>

static/css/style.css

@@ -345,3 +345,31 @@ body {
     border-top: 2px dashed #aaa;
     margin: 1rem 0 0.5rem 0;
 }
+
+/* ==================== “下一篇文章”固定按钮 ==================== */
+.next-article-btn {
+    position: fixed;
+    right: 20px;
+    bottom: 50px;
+    width: 48px;
+    height: 48px;
+    background-color: #2c2c2c;
+    color: #fffff2;
+    border: 2px solid #2c2c2c;
+    border-radius: 50%;
+    font-size: 1.5rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1000;
+    transition: background-color 0.2s, color 0.2s, transform 0.2s;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.next-article-btn:hover {
+    background-color: #fffff2;
+    color: #2c2c2c;
+    transform: scale(1.1);
+}

static/js/main.js

@@ -33,4 +33,23 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         });
     });
+
+    // 固定“下一篇文章”按钮功能（仅首页存在）
+    const nextBtn = document.getElementById('nextArticleBtn');
+    if (nextBtn) {
+        nextBtn.addEventListener('click', function () {
+            const cards = document.querySelectorAll('.card');
+            if (!cards.length) return;
+            // 找到第一个顶部在视口下方（或刚好可见）的卡片
+            for (const card of cards) {
+                const rect = card.getBoundingClientRect();
+                if (rect.top >= 1) {
+                    card.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    return;
+                }
+            }
+            // 没有在下方可见的卡片，滚动到最后一篇
+            cards[cards.length - 1].scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }
 });

templates/index.html

@@ -34,4 +34,6 @@
         </div>
     {% endif %}
 </div>
+
+<div class="next-article-btn" id="nextArticleBtn" title="下一篇文章">↓</div>
 {% endblock %}