Back to top

.gitignore

@@ -11,7 +11,8 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
-# Configuration files with sensitive data
+# Firebase / API config (to avoid leaking keys)
+firebase.js
 js/google_config.js
 
 # IDE and editor files

css/index.css

@@ -1638,9 +1638,10 @@ body {
         transform: rotate(360deg);
     }
 }
-/* Scroll to Bottom Button */
-#scrollToBottomBtn {
-  display: none;
+
+/* scroll to top and bottom in same place home page */
+#scrollToBottomBtn,
+#scrollToTopBtn {
   position: fixed;
   bottom: 30px;
   right: 30px;
@@ -1655,39 +1656,12 @@ body {
   font-size: 20px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, background 0.3s ease;
+  display: none; /* hidden by default */
 }
 
-#scrollToBottomBtn:hover {
-  transform: translateY(2px) scale(1.05);
+#scrollToBottomBtn:hover,
+#scrollToTopBtn:hover {
+  transform: scale(1.05);
   background: linear-gradient(45deg, var(--sky-blue), var(--sunny-yellow));
 }
 
-/* light and dark theme for hamburger menu */
-@media (max-width: 768px) {
-  /* Light Mode Menu */
-  [data-theme="light"] .menu {
-    background:  #F2F0EF !important;
-  }
-
-  [data-theme="light"] .menu a,
-  [data-theme="light"] .menu .fb-color a,
-  [data-theme="light"] .menu .login-btn,
-  [data-theme="light"] .menu .signup-btn,
-  [data-theme="light"] .menu .scale-nav-btn {
-    color: #000000 !important;
-  }
-
-  /* Dark Mode Menu */
-  [data-theme="dark"] .menu {
-    background: #1e1e1e !important; /* dark grey */
-  }
-
-  [data-theme="dark"] .menu a,
-  [data-theme="dark"] .menu .fb-color a,
-  [data-theme="dark"] .menu .login-btn,
-  [data-theme="dark"] .menu .signup-btn,
-  [data-theme="dark"] .menu .scale-nav-btn
-  [data-theme="dark"] .menu .user-info span{
-    color: #ffffff !important;
-  }
-}

index.html

@@ -153,6 +153,14 @@ <h3>Follow Us</h3>
     <i class="fas fa-arrow-down"></i>
   </button>
 
+<!-- Scroll to Top Button -->
+<button id="scrollToTopBtn" class="scroll-btn">
+  <i class="fas fa-arrow-up"></i>
+</button>
+
+
+
+
   <!-- Scripts -->
   <script src="js/theme.js"></script>
   <script src="js/index.js"></script>

js/index.js

@@ -54,25 +54,42 @@ document.querySelectorAll('.feature-card').forEach(card => {
   });
 });
 
-// ================= Scroll-to-Bottom Button =================
+// ================= Scroll-to-Top & Bottom Toggle =================
 const scrollToBottomBtn = document.getElementById("scrollToBottomBtn");
-if (scrollToBottomBtn) {
-  const showThreshold = 200; // px from top to show button
+const scrollToTopBtn = document.getElementById("scrollToTopBtn");
 
-  // Toggle visibility
-  function toggleScrollBottomBtn() {
-    if (window.scrollY < document.body.scrollHeight - window.innerHeight - showThreshold) {
+if (scrollToBottomBtn && scrollToTopBtn) {
+  const showThreshold = 200; // px from top
+
+  function toggleScrollBtns() {
+    const scrollY = window.scrollY;
+    const nearBottom = scrollY >= document.body.scrollHeight - window.innerHeight - showThreshold;
+
+    if (scrollY <= showThreshold) {
+      // At top → show bottom button, hide top
       scrollToBottomBtn.style.display = "block";
+      scrollToTopBtn.style.display = "none";
+    } else if (nearBottom) {
+      // At bottom → show top button only
+      scrollToBottomBtn.style.display = "none";
+      scrollToTopBtn.style.display = "block";
     } else {
+      // In between → show top button
       scrollToBottomBtn.style.display = "none";
+      scrollToTopBtn.style.display = "block";
     }
   }
 
-  window.addEventListener("scroll", toggleScrollBottomBtn, { passive: true });
-  toggleScrollBottomBtn();
+  window.addEventListener("scroll", toggleScrollBtns, { passive: true });
+  toggleScrollBtns();
 
   // Scroll smoothly to bottom
   scrollToBottomBtn.addEventListener("click", () => {
     window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
   });
+
+  // Scroll smoothly to top
+  scrollToTopBtn.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
 }