From 16116b38eb33eaa2b57c20cddfc2cb35cf83c9a0 Mon Sep 17 00:00:00 2001
From: TanishMoral11 <ishantmoral@gmail.com>
Date: Tue, 6 Feb 2024 22:24:47 +0530
Subject: [PATCH] float button

---
 index.html |  5 ++++-
 script.js  | 28 +++++++++++++++++++++++++++-
 style.css  | 26 +++++++++++++++++++++++++-
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 045d14c..e6aab86 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,10 @@ <h1 class="Main_title">
     </nav>
 
     <!-- Main title of the page -->
-
+    <button id="scrollToTopBtn" class="scroll-to-top-btn" title="Go to top">
+        <i class="bx bx-chevron-up"></i>
+      </button>
+      
 
     <!-- Main container for content -->
     <div class="container">
diff --git a/script.js b/script.js
index f4adb2e..1c7ff2c 100644
--- a/script.js
+++ b/script.js
@@ -89,4 +89,30 @@ document.addEventListener("DOMContentLoaded", function() {
           behavior: 'smooth'
       });
   });
-});
\ No newline at end of file
+});
+
+
+// Get the button
+var scrollToTopBtn = document.getElementById("scrollToTopBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    scrollToTopBtn.style.display = "block";
+  } else {
+    scrollToTopBtn.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+scrollToTopBtn.addEventListener("click", function() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+});
diff --git a/style.css b/style.css
index 01d1465..b2fc524 100644
--- a/style.css
+++ b/style.css
@@ -500,4 +500,28 @@ nav .navbar .links li .sub-menu li{
 }
 
 
-/* End Of The Nav Bar Code */
\ No newline at end of file
+/* End Of The Nav Bar Code */
+
+
+/* Scroll to top button */
+.scroll-to-top-btn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #3E8DA8;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  font-size: 24px;
+  outline: none;
+  z-index: 99;
+}
+
+.scroll-to-top-btn i {
+  position: relative;
+  top: 3px;
+}