From 8a331d199cf850446a4e9b6e0fc907457bee2bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=8F=89=E6=A0=91=E6=A0=91?= <acofork@qq.com>
Date: Fri, 9 Jan 2026 19:17:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B8=83=E5=B1=80):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E8=AF=84=E8=AE=BA=E5=8C=BA=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在布局组件中添加返回评论区按钮，当页面滚动超过横幅高度且评论区存在时显示该按钮。点击按钮可平滑滚动至评论区位置。
---
 src/components/control/BackToTop.astro | 15 +++++++++++++++
 src/layouts/Layout.astro               | 11 +++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/components/control/BackToTop.astro b/src/components/control/BackToTop.astro
index 0a93af4cb..fd12b553e 100644
--- a/src/components/control/BackToTop.astro
+++ b/src/components/control/BackToTop.astro
@@ -4,6 +4,11 @@ import { Icon } from "astro-icon/components";
 
 <!-- There can't be a filter on parent element, or it will break `fixed` -->
 <div class="back-to-top-wrapper hidden lg:block">
+    <div id="go-to-comments-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="goToComments()">
+        <button aria-label="Go to Comments" class="btn-card h-[3.75rem] w-[3.75rem]">
+            <Icon name="material-symbols:comment-rounded" class="mx-auto"></Icon>
+        </button>
+    </div>
     <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="backToTop()">
         <button aria-label="Back to Top" class="btn-card h-[3.75rem] w-[3.75rem]">
             <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
@@ -31,6 +36,7 @@ import { Icon } from "astro-icon/components";
     cursor: pointer
     transform: translateX(5rem)
     pointer-events: auto
+    z-index: 50
     i
         font-size: 1.75rem
     &.hide
@@ -40,10 +46,19 @@ import { Icon } from "astro-icon/components";
     &:active
       transform: translateX(5rem) scale(0.9)
 
+#go-to-comments-btn
+    bottom: 14.5rem
 </style>
 
 <script is:raw is:inline>
 function backToTop() {
     window.scroll({ top: 0, behavior: 'smooth' });
 }
+
+function goToComments() {
+    const comments = document.getElementById('giscus-container');
+    if (comments) {
+        comments.scrollIntoView({ behavior: 'smooth' });
+    }
+}
 </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c3060573d..2db593f90 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -623,6 +623,7 @@ if (window?.swup?.hooks) {
 }
 
 let backToTopBtn = document.getElementById('back-to-top-btn');
+let goToCommentsBtn = document.getElementById('go-to-comments-btn');
 let toc = document.getElementById('toc-wrapper');
 let navbar = document.getElementById('navbar-wrapper')
 function scrollFunction() {
@@ -636,6 +637,16 @@ function scrollFunction() {
 		}
 	}
 
+    if (goToCommentsBtn) {
+        // Only show if comments exist and scrolled down
+        const commentsExist = !!document.getElementById('giscus-container');
+        if (commentsExist && (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight)) {
+            goToCommentsBtn.classList.remove('hide')
+        } else {
+            goToCommentsBtn.classList.add('hide')
+        }
+    }
+
 	if (bannerEnabled && toc) {
 		if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
 			toc.classList.remove('toc-hide')