Merge pull request #18 from RitaRossweiss/main

✨右下角添加返回顶部按钮；移动Github徽标到右上角

Author: Cicada000

Web/index.html

@@ -67,6 +67,12 @@ <h1 id="title">这就是VV</h1>
             </svg>
         </a>
     </footer>
+    
+    <footer id="backToTop" class="back-to-top" title="返回顶部">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M17 15l-5-5-5 5"/>
+        </svg>
+    </footer>
 
     <script src="db_search.js"></script>
     <script src="script.js"></script>

Web/script.js

@@ -706,4 +706,20 @@ function handleCardClick(result) {
             break
         }
     }
-}
+}
+// backToTop
+var button = document.getElementById('backToTop');
+button.style.display = 'none';
+window.addEventListener('scroll', function() {
+    if (window.pageYOffset > 200) {
+        button.style.display = 'block';
+    } else {
+        button.style.display = 'none';
+    }
+});
+button.addEventListener('click', function() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});

Web/style.css

@@ -311,8 +311,14 @@ input:focus {
 }
 
 .site-footer {
-    text-align: center;
-    padding: 2rem 0;
+    position: fixed;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 1rem;
+    z-index: 1000;
+    text-align: right;
+    backdrop-filter: blur(20px);
+    -webkit-mask: radial-gradient(closest-side circle, #000 40%, transparent 100%);
 }
 
 .github-link {
@@ -325,6 +331,17 @@ input:focus {
     opacity: 1;
 }
 
+.back-to-top{
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    padding: 1rem;
+    z-index: 1000;
+    text-align: right;
+    backdrop-filter: blur(20px);
+    -webkit-mask: radial-gradient(closest-side circle, #000 40%, transparent 100%);
+}
+
 @media (max-width: 640px) {
     .main-content {
         padding: 0 1rem;
@@ -780,4 +797,4 @@ button {
     .error-message:active {
         background-color: var(--gray-100);
     }
-}
+}