From cf6d1e51da8a2b77da66082274e2cfbf95ca732a Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Tue, 30 Jul 2024 23:27:09 +0530
Subject: [PATCH] Back to top button

Pointless css was added in each of the side pages for a minor thing (bottom spacing) so improved it by adding a separate div name on main page
Updates the backtotop js file completely and added code to and listeners that do not cause issues in the console and get executed smoothly without fail
tested on all pages and ensured that button is hidden during loading and simulation
---
 css/style.css           |  8 ++++---
 index.html              |  4 +++-
 js/backToTopBtn.js      | 34 +++++++++++++++--------------
 js/script.js            | 48 ++++++++++++++++++++---------------------
 pages/about.html        | 33 +++-------------------------
 pages/contributors.html | 31 ++------------------------
 pages/faq.html          | 31 ++------------------------
 pages/features.html     | 29 +------------------------
 pages/feedback.html     | 31 ++------------------------
 pages/privacy.html      | 31 ++------------------------
 pages/terms.html        | 31 ++------------------------
 11 files changed, 64 insertions(+), 247 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6c7c48d..eefa658 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1956,7 +1956,7 @@ button:hover {
 
 #backToTopBtn {
   position: fixed;
-  bottom: 130px;
+  bottom: 50px;
   right: 31px;
   height: 50px;
   width: 50px;
@@ -1969,7 +1969,7 @@ button:hover {
   border-radius: 50%;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: 500ms;
-  display: none; /* Initially hide the button */
+  display: none;
   justify-content: center;
   align-items: center;
   z-index: 9999;
@@ -1981,7 +1981,9 @@ button:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
 }
-
+.indexpage #backToTopBtn {
+  bottom: 130px;  
+}
 
 .header {
   margin-top: 100px;
diff --git a/index.html b/index.html
index ab80793..2b344f2 100644
--- a/index.html
+++ b/index.html
@@ -156,7 +156,9 @@
       </lottie-player>
     </div>
   </div>
-  <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
+  <div class="indexpage">
+    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
   <!-- Generate snowflakes dynamically with JavaScript -->
   <div class="snowflakes">
     <div id="particles-js"></div>
diff --git a/js/backToTopBtn.js b/js/backToTopBtn.js
index 707d924..ead20cd 100644
--- a/js/backToTopBtn.js
+++ b/js/backToTopBtn.js
@@ -1,22 +1,24 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const backToTopButton = document.getElementById('backToTopBtn');
 
-let backToTopBtn = document.getElementById("backToTopBtn");
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
 
-window.onscroll = function() {
-    scrollFunction();
-};
-
-function scrollFunction() {
-    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
-        backToTopBtn.style.display = "block";
-    } else {
-        backToTopBtn.style.display = "none";
+    function handleScroll() {
+        if (window.scrollY === 0) {
+            backToTopButton.classList.add('disabled');
+            backToTopButton.style.display = 'none'; // Hide button at top
+        } else {
+            backToTopButton.classList.remove('disabled');
+            backToTopButton.style.display = 'block'; // Show button when scrolling
+        }
     }
-}
 
+    window.startSimulation = function() {
+        backToTopButton.style.display = 'none';
+    }
 
-backToTopBtn.addEventListener("click", function() {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-    });
+    window.backToTop = function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
 });
diff --git a/js/script.js b/js/script.js
index e760e58..d65d91a 100644
--- a/js/script.js
+++ b/js/script.js
@@ -885,16 +885,16 @@ function effect() {
     loader.style.display = "none";
     document.querySelector(".unload").style.display = "block";
     document.querySelector(".snowflakes").style.display = "block";
-    var backToTopBtn = document.getElementById("backToTopBtn");
-    backToTopBtn.style.display = "block";
+    // var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "block";
 }
 
 
 
 var loader = document.querySelector(".loader");
 window.addEventListener('load', () => {
-    var backToTopBtn = document.getElementById("backToTopBtn");
-    backToTopBtn.style.display = "none";
+    // var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "none";
     setTimeout(effect, 4000);
 })
 
@@ -904,26 +904,26 @@ function changeColor() {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-    var backToTopBtn = document.getElementById("backToTopBtn");
-    backToTopBtn.style.display = "block";
-    backToTopBtn.addEventListener("click", function () {
-        scrollToTop();
-        scrollToForm();
-    });
-
-    function scrollToTop() {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    }
-    function scrollToForm() {
-        const formElement = document.getElementById("box");
-        formElement.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    }
+    // var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "block";
+    // backToTopBtn.addEventListener("click", function () {
+    //     scrollToTop();
+    //     scrollToForm();
+    // });
+
+    // function scrollToTop() {
+    //     window.scrollTo({
+    //         top: 0,
+    //         behavior: "smooth"
+    //     });
+    // }
+    // function scrollToForm() {
+    //     const formElement = document.getElementById("box");
+    //     formElement.scrollTo({
+    //         top: 0,
+    //         behavior: "smooth"
+    //     });
+    // }
 
     document.querySelector("#reload").addEventListener("click", () => {
         window.location.reload();
diff --git a/pages/about.html b/pages/about.html
index d96549e..ce60862 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -58,33 +58,6 @@
     }
   
   }
-  #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
 
     </style>
   
@@ -130,7 +103,7 @@
         const circles = document.querySelectorAll(".circle");
   
         circles.forEach(function (circle) {
-          circle.x = 0;
+          circle.x = 0; 
           circle.y = 0;
         });
   
@@ -163,8 +136,8 @@
       });
     </script>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/contributors.html b/pages/contributors.html
index 25540e9..3b8ad23 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -60,33 +60,6 @@
         }
 
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
         </style>
 
 
@@ -164,8 +137,8 @@
           });
         </script>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/faq.html b/pages/faq.html
index 9c852c7..d7d517a 100644
--- a/pages/faq.html
+++ b/pages/faq.html
@@ -92,33 +92,6 @@
         }
       
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
         </style>
       
       
@@ -196,8 +169,8 @@
           });
         </script>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/features.html b/pages/features.html
index 1b240c2..c2885f7 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -58,33 +58,6 @@
         }
       
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
         </style>
       
       
@@ -161,7 +134,7 @@
             animateCircles();
           });
         </script>
-    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
+    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/feedback.html b/pages/feedback.html
index 94f05e6..7e64c9e 100644
--- a/pages/feedback.html
+++ b/pages/feedback.html
@@ -60,33 +60,6 @@
         }
 
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
       
     </style>
 </head>
@@ -125,8 +98,8 @@
         <div class="circle"></div>
       </div>
   
-    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    <div class="snowflakes" style="display: block;">
+      <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+      <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
     <div class="navHeader">
diff --git a/pages/privacy.html b/pages/privacy.html
index 8be6db9..e518762 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -47,33 +47,6 @@
         display: none;
       }
     }
-    #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
     </style>
 </head>
 <body>
@@ -159,8 +132,8 @@
             </label>
         </div>
         <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+        </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/terms.html b/pages/terms.html
index 1bad001..40d085d 100644
--- a/pages/terms.html
+++ b/pages/terms.html
@@ -47,33 +47,6 @@
         display: none;
       }
     }
-    #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
     </style>
 </head>
 <body>
@@ -159,8 +132,8 @@
            </label>
        </div>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>