Add scroll to top and email button

rayatiga · Mar 4, 2024 · 22f5ae4 · 22f5ae4
1 parent 4ac177c
commit 22f5ae4
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/public/asset/js/main.js b/public/asset/js/main.js
@@ -1,4 +1,24 @@
 /* File: main.js */
+/* Default: Scroll to Top */
+document.body.insertAdjacentHTML("beforeend", '<button class="btn bg-body border position-fixed shadow-sm" id="scroll-to-top" style="bottom: 56px; right: 12px;" title="Scroll to Top"><i class="bi bi-arrow-up"></i></button>');
+const scrollTopBtn = document.getElementById("scroll-to-top");
+scrollTopBtn.style.display = "none";
+scrollTopBtn.addEventListener("click", function () {
+  window.scrollTo(0, 0);
+});
+window.addEventListener("scroll", function () {
+  if (window.scrollY > 128) {
+    scrollTopBtn.style.display = "block";
+  } else {
+    scrollTopBtn.style.display = "none";
+  }
+});
+/* Default: Email Button */
+document.body.insertAdjacentHTML("beforeend", `<button class="btn bg-body border position-fixed shadow-sm" onclick="emailButton()" data-bs-title="Email Me" data-bs-toggle="tooltip" style="bottom: 12px; right: 12px;" title="Email Me"><i class="bi bi-envelope-at"></i></button>`);
+/* Default: Function Email Button */
+function emailButton() {
+  window.open("mailto:[email protected]");
+}
 /* Framework: Bootstrap: Popover */
 const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
 const popoverList = [...popoverTriggerList].map((popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl));