From 319e160e5c92ea3597cb79c1b93e4b39b9a7216b Mon Sep 17 00:00:00 2001
From: Bhavy_Zala <zalabhavy2004@gmail.com>
Date: Mon, 3 Jun 2024 18:03:38 +0530
Subject: [PATCH] Scroll to top button added

---
 Official_Website/app.js                | 19 +++++++++++++++++++
 Official_Website/contributor-style.css |  3 +--
 Official_Website/index.html            |  1 +
 Official_Website/style.css             | 26 +++++++++++++++++++++++++-
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/Official_Website/app.js b/Official_Website/app.js
index 7e72c122..d6cbb1d3 100644
--- a/Official_Website/app.js
+++ b/Official_Website/app.js
@@ -170,3 +170,22 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   fetchRepository("https://api.github.com/repos/mdazfar2/HelpOps-Hub/contents");
 });
+//Scroll to top js
+const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+function scrollToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  });
+}
+function handleScroll() {
+  if (window.pageYOffset > 100) {
+    scrollToTopBtn.classList.add('show');
+  } else {
+    scrollToTopBtn.classList.remove('show');
+  }
+}
+// Add scroll event listener
+window.addEventListener('scroll', handleScroll);
+// Add click event listener
+scrollToTopBtn.addEventListener('click', scrollToTop);
diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
index 798685b6..7b3473f2 100644
--- a/Official_Website/contributor-style.css
+++ b/Official_Website/contributor-style.css
@@ -437,5 +437,4 @@ width: 40px;
   height: 200px;
   width: 200px;
   border-radius: 50%;
- }
-
+ }
\ No newline at end of file
diff --git a/Official_Website/index.html b/Official_Website/index.html
index ff874fad..ef4c8903 100644
--- a/Official_Website/index.html
+++ b/Official_Website/index.html
@@ -54,6 +54,7 @@ <h1>HelpOps-Hub</h1>
             </svg>
         </div>
     </div>
+    <button id="scrollToTopBtn" class="scrollToTopBtn">▲</button>
     <div id="folders-container"></div>
     <script src="app.js"></script>
     <script src="darkmode.js"></script>
diff --git a/Official_Website/style.css b/Official_Website/style.css
index 27c89222..d4ecbe0c 100644
--- a/Official_Website/style.css
+++ b/Official_Website/style.css
@@ -244,4 +244,28 @@ width: 40px;
   color: inherit;
   text-decoration: none;
   font-size: 20px; /* Adjust as needed */
-}
\ No newline at end of file
+}
+/*Scroll to top*/
+.scrollToTopBtn {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  width: 50px;
+  height: 50px;
+  background-color: #00ccff;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 50px;
+  font-size: 24px;
+  cursor: pointer;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1000;
+}
+.scrollToTopBtn.show {
+  opacity: 1;
+  visibility: visible;
+}