Merge pull request #424 from meetarora10/top-branch

Added a scroll to top button on every page .
ChromeGaming · Aug 10, 2024 · 15a99b3 · 15a99b3
2 parents e89f12a + c4a9856
commit 15a99b3
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 27 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -35,41 +35,26 @@ body.page-leaderboard {
 }
 
 /* scroll to top button */
-#myBtn {
+.top-btn {
   display: none;
-  /* Hidden by default */
+  width: 50px;
+  height: 50px;
   position: fixed;
-  /* Fixed/sticky position */
   bottom: 10px;
-  /* Place the button at the bottom of the page */
-  right: 10px;
-  /* Place the button 30px from the right */
-  z-index: 99;
-  /* Make sure it does not overlap */
+  right: 0px;
+  background-color: #ab45e7;
+  color: #fff;
+  padding: 2px;
   border: none;
-  /* Remove borders */
-  outline: none;
-  /* Remove outline */
-  background-color: #c535db;
-  /* Set a background color */
-  color: white;
-  /* Text color */
+  margin-right: 36px;
+  border-radius: 50%;
   cursor: pointer;
-  /* Add a mouse pointer on hover */
-  padding: 15px;
-  /* Some padding */
-  border-radius: 12px;
-  /* Rounded corners */
-  font-size: 18px;
-  /* Increase font size */
+  z-index: 1000;
 }
 
-#myBtn:hover {
-  background-color: #af2929;
-  color: #efeff3;
-  /* Add a dark-grey background on hover */
+.top-btn:hover {
+  background-color: #0056b3;
 }
-
 .alert.show {
   opacity: 1;
   visibility: visible;

diff --git a/public/js/script.js b/public/js/script.js
@@ -190,7 +190,27 @@ window.onload = async function () {
   });
   console.log("RUNNED");
 };
+        // Get the button
+  var mybutton = document.getElementById("goToTopBtn");
+
+// 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) {
+        mybutton.style.display = "block";
+      } else {
+        mybutton.style.display = "none";
+      }
+    }
 
+    // When the user clicks on the button, scroll to the top of the document
+    function goToTop() {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
 const nav = document.querySelector(".nav"),
   searchIcon = document.querySelector("#searchIcon"),
   navOpenBtn = document.querySelector(".navOpenBtn"),

diff --git a/server/views/about.ejs b/server/views/about.ejs
@@ -208,6 +208,8 @@
 			</div>
 		</div>
 	</div>
+	<button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up"
+		style="color: #ffffff;"></i></button>
 	<!-- Horizontal line separator. -->
 	<section class="footer">
 		<!-- Footer section. -->

diff --git a/server/views/index.ejs b/server/views/index.ejs
@@ -28,6 +28,10 @@
   <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
   <!-- Link to the fontawesome icons file. -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+  integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+  crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
 
   <!-- Link to the Unicons CSS file. -->
 
@@ -134,6 +138,7 @@
     }
 
     /*=============== REUSABLE CSS CLASSES ===============*/
+    
     .container {
       max-width: 1120px;
       margin-inline: 1.5rem;
@@ -750,6 +755,91 @@
         <!-- Placeholder text. -->
       </div>
     </div>
+  </section>
+  <button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up"
+    style="color: #ffffff;"></i></button>
+
+
+
+
+
+
+
+
+
+
+  <!-- Horizontal line separator. -->
+  <section class="footer">
+    <!-- Footer section. -->
+    <div class="footer-row">
+      <!-- Row within the footer. -->
+      <div class="footer-col">
+        <!-- Column within the footer. -->
+        <h4>Info</h4>
+        <!-- Heading for info section. -->
+        <ul class="links">
+          <!-- Unordered list for links. -->
+          <li><a href="/index">Home</a></li>
+          <li><a href="/play">Play Games</a></li>
+          <li><a href="/product">Products</a></li>
+          <li><a href="/about">About Us</a></li>
+          <li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/">Certificate</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <!-- Second column within the footer. -->
+        <h4>Explore</h4>
+        <!-- Heading for explore section. -->
+        <ul class="links">
+          <!-- Unordered list for links. -->
+          <li><a href="#">Free Designs</a></li>
+          <li><a href="#">Latest Designs</a></li>
+          <li><a href="#">Themes</a></li>
+          <li><a href="#">Popular Designs</a></li>
+          <li><a href="#">Art Skills</a></li>
+          <li><a href="#">New Uploads</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <!-- Third column within the footer. -->
+        <h4>Legal</h4>
+        <!-- Heading for legal section. -->
+        <ul class="links">
+          <!-- Unordered list for links. -->
+          <li><a href="#">Customer Agreement</a></li>
+          <li><a href="#">Privacy Policy</a></li>
+          <li><a href="#">GDPR</a></li>
+          <li><a href="#">Security</a></li>
+          <li><a href="#">Testimonials</a></li>
+          <li><a href="#">Media Kit</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <!-- Fourth column within the footer. -->
+        <h4>Newsletter</h4>
+        <!-- Heading for newsletter section. -->
+        <p>
+          Subscribe to our newsletter for a weekly dose of news, updates,
+          helpful tips, and exclusive offers.
+        </p>
+        <!-- Text for newsletter subscription. -->
+        <form id="subscriptionForm" action="#">
+          <input id="emailInput" type="email" placeholder="Your email" required pattern="[^\s@]+@[^\s@]+\.[^\s@]+" />
+          <button id="submitButton" type="submit">SUBSCRIBE</button>
+        </form>
+        <div class="footer-column">
+					<h4>Follow us</h4>
+					<div class="social-links">
+						<a href="mailto:[email protected]" target="_blank" class="gmail-icon"><i class="fab fa-google"></i></a>
+						<a href="https://www.linkedin.com/company/chromegaming" target="_blank" <i class="fab fa-linkedin"></i></a>
+						<a href="https://discord.com/" target="_blank" class="discord-icon fab fa-discord"></a>
+						<a href="https://www.medium.com/" target="_blank" class="fab fa-medium"></a>
+						<a href="https://www.instagram.com/chromegamingon/" target="_blank" class="fab fa-instagram"></a>
+					</div>
+				</div>
+        <div id="customAlert" class="alert">
+          <span id="alertText"></span>
+          <button id="closeAlert">&times;</button>
 
     <div style="text-align: center; display: flex; flex-direction: column; align-items: center;">
       <img alt="Leaderboard" class="mb-2"

diff --git a/server/views/play.ejs b/server/views/play.ejs
@@ -239,6 +239,8 @@
 		</div>
 
 		<!-- Horizontal line separator. -->
+		<button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up"
+			style="color: #ffffff;"></i></button>
 		<section class="footer">
 			<!-- Footer section. -->
 			<div class="footer-row">

diff --git a/server/views/products.ejs b/server/views/products.ejs
@@ -369,6 +369,8 @@
 
 
   <!-- Horizontal line separator. -->
+  <button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up"
+    style="color: #ffffff;"></i></button>
   <section class="footer pt-5">
     <!-- Footer section. -->
     <div class="footer-row">