From 6f4860a552e0bad21f4bb5e2ba2db46798534138 Mon Sep 17 00:00:00 2001
From: Shashwat-Trivedi <shashwatrivedi2005@gmail.com>
Date: Wed, 2 Oct 2024 10:21:25 +0530
Subject: [PATCH] added back to top button

---
 assets/css/style.css | 12 ++++++++++++
 assets/js/script.js  | 29 ++++++++++++++++++++++++++++-
 index.html           |  8 ++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 380dfd7..630b2bc 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1336,8 +1336,20 @@ textarea.input-field {
   text-decoration: underline;
 }
 
+/*-----------------------------------*\
+  #BACK TO TOP BUTTON
+\*-----------------------------------*/
 
 
+#backToTopButton {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  padding: 10px 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: none; /* Initially hidden */
+}
 
 
 
diff --git a/assets/js/script.js b/assets/js/script.js
index 6403e32..b9aa828 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,4 +1,31 @@
 
+
+
+/*-----------------------------------*\
+  #BACK TO TOP BUTTON
+\*-----------------------------------*/
+
+
+const backToTopButton = document.getElementById("backToTopButton");
+
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 100) {
+    backToTopButton.style.display = "block";
+  } else {
+    backToTopButton.style.display = "none";
+  }
+});
+
+backToTopButton.addEventListener("click", 
+ () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth" 
+
+  });
+});
+
+
 /**
  * PRELOAD
  * 
@@ -141,4 +168,4 @@ window.addEventListener("mousemove", function (event) {
     parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
   }
 
-});
\ No newline at end of file
+});
diff --git a/index.html b/index.html
index e97ba51..523b0a3 100644
--- a/index.html
+++ b/index.html
@@ -1179,7 +1179,15 @@ <h3 class="card-title title-2 text-center">
     </div>
   </footer>
 
+  <!-- 
+    - back to top button
+  -->
+
+  <button id="backToTopButton" class="btn btn-secondary" >
+    <span class="text text-1">^</span>
 
+    <span class="text text-2" aria-hidden="true">^</span>
+  </button>