feat(布局): 添加返回评论区按钮功能

在布局组件中添加返回评论区按钮，当页面滚动超过横幅高度且评论区存在时显示该按钮。点击按钮可平滑滚动至评论区位置。

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>

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')