added back to top

1 files changed, 48 insertions, 1 deletions

diff --git a/pandoc/template.html b/pandoc/template.html
index b401064..b20ac7f 100644
--- a/pandoc/template.html
+++ b/pandoc/template.html
@@ -139,7 +139,6 @@
             z-index: -1;
             overflow: hidden;
         }
-
         .video-background video {
             width: 100vw;
             height: 100vh;
@@ -150,6 +149,27 @@
             object-fit: cover;
             opacity: 0.15;
         }
+        .back-to-top {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: #bbbbbb;
+            border: 1px solid #333;
+            padding: 8px 12px;
+            font-family: 'MorePerfectDOSVGA', monospace;
+            font-size: 12px;
+            cursor: pointer;
+            display: none;
+            z-index: 1000;
+            text-align: center;
+            text-decoration: none;
+        }
+        .back-to-top:hover {
+            background-color: rgba(0, 0, 0, 0.7);
+            color: #ffffff;
+            border-color: #bbbbbb;
+        }
         @media (max-width: 600px) {
             body {
                 padding: 15px;
@@ -173,6 +193,12 @@
             .search-box {
                 margin-top: 10px;
             }
+            .back-to-top {
+                top: 15px;
+                right: 15px;
+                padding: 6px 10px;
+                font-size: 10px;
+            }
         }
         @media (max-width: 400px) {
             .title-box {
@@ -182,6 +208,10 @@
                 font-size: 12px;
                 padding: 6px;
             }
+            .back-to-top {
+                top: 10px;
+                right: 10px;
+            }
         }
     </style>
 </head>
@@ -191,6 +221,7 @@
             <source src="/assets/background.webm" type="video/webm">
         </video>
     </div>
+    <button class="back-to-top" onclick="scrollToTop()">back to top</button>
     <div class="title-box">
         <h1>$title$</h1>
         <div class="links">
@@ -213,6 +244,22 @@
                 item.style.display = text.includes(query) ? '' : 'none';
             });
         });
+
+        const backToTopButton = document.querySelector('.back-to-top');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                backToTopButton.style.display = 'block';
+            } else {
+                backToTopButton.style.display = 'none';
+            }
+        });
+
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
     </script>
 </body>
 </html>