Add scroll to top button

assets/js/main.js

@@ -84,6 +84,20 @@ function toggleToc() {
 
 listen ("#toc-btn", "click", toggleToc);
 
+// Scroll to Top
+//
+const scrollBtn = document.getElementById('scroll-top-btn');
+const btnVisibility = () => {
+    if ((window.scrollY > 400) && (window.innerWidth >= 1590)) {
+        scrollBtn.style.display = "block";
+    } else {
+        scrollBtn.style.display = "none";
+    }
+};
+
+scrollBtn.addEventListener("click", () => {
+  window.scrollTo(0,0);
+});
 
 // Anchor points for list page
 //
@@ -115,6 +129,13 @@ const loadComments = () => {
   });
 }
 
+// Load comments if the window is not scrollable
+if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
+  commentsLoader.style.display = 'block';
+  loadComments();
+  commentsLoaded = true;
+}
+
 window.addEventListener('scroll', throttle(() => {
   if ((comments !== null) && (commentsLoaded == false)) {
     if (window.pageYOffset + window.innerHeight > comments.offsetTop) {
@@ -123,11 +144,7 @@ window.addEventListener('scroll', throttle(() => {
       commentsLoaded = true;
     }
   }
-}, 250));
-
-// Load comments if the window is not scrollable
-if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
-  commentsLoader.style.display = 'block';
-  loadComments();
-  commentsLoaded = true;
-}
+  if (scrollBtn !== null) {
+    btnVisibility();
+  }
+}, 150));

assets/scss/_predefined.scss

@@ -24,3 +24,14 @@ $mono-fonts: "Cascadia Code", Consolas, Menlo, Monaco, "Lucida Console", "Lucida
     }
   }
 }
+
+@keyframes slideIn {
+  from {
+    transform: translateY(50%) scale(.8);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 100%;
+  }
+}

assets/scss/partials/_single.scss

@@ -239,6 +239,22 @@ hr.post-end {
   }
 }
 
+#scroll-top-btn {
+  display: none;
+  position: fixed;
+  margin: 0;
+  padding: 0;
+  bottom: .8rem;
+  left: calc(var(--offset) - 2.5rem);
+  line-height: 0;
+  font-size: 1.5rem;
+  border: none;
+  color: var(--c-txt-alt);
+  background: transparent;
+  cursor: pointer;
+  animation: slideIn .2s ease-out;
+}
+
 // Gallery Page
 //
 .album-meta {

layouts/gallery/single.html

@@ -41,6 +41,7 @@
 			</a>
 			{{- end }}
 		</div>
+		<button type="button" id="scroll-top-btn" title="回到顶部"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg></button>
 		{{ partialCached "comments.html" . }}
 	</main>
 {{ end }}

layouts/writing/single.html

@@ -63,6 +63,7 @@
 			</a>
 			{{- end }}
 		</div>
+		<button type="button" id="scroll-top-btn" title="回到顶部"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg></button>
 		{{ partialCached "comments.html" . }}
 	</main>
 {{ end }}