Added Scroll to top button (#13)

Rakesh9100 · Dec 14, 2024 · 791eca9 · 791eca9
1 parent 8169848
commit 791eca9
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 1 deletion.
diff --git a/assets/about/about.html b/assets/about/about.html
@@ -78,9 +78,14 @@ <h3 class="feature-title">Up-to-date Calendar</h3>
                     </div>
                 </div>
             </div>
-        </section>        
+        </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>

diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -68,6 +68,11 @@ <h1 class="section-title">Contact Us</h1>
         </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>

diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
@@ -56,6 +56,11 @@ <h1 class="section-title">Past Events</h1>
         </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>

diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
     <link rel="stylesheet" href="./style.css">
+    <script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
     <title>Eventica</title>
 </head>
 
@@ -69,6 +70,11 @@ <h2 class="section-title">Upcoming Events</h2>
         </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>

diff --git a/script.js b/script.js
@@ -200,3 +200,39 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 });
+
+// Scroll to top button
+document.addEventListener('DOMContentLoaded', () => {
+    // Select the scroll-to-top button
+    const toTop = document.querySelector(".to-top");
+
+    if (!toTop) {
+        console.error('Scroll-to-top element not found.');
+        return;
+    }
+
+    // Show or hide the button on scroll
+    function checkHeight() {
+        if (window.scrollY > 100) {
+            toTop.classList.add("active");
+        } else {
+            toTop.classList.remove("active");
+        }
+    }
+
+    // Debounce the scroll event for performance
+    let scrollTimeout;
+    window.addEventListener("scroll", () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(checkHeight, 100);
+    });
+
+    // Smooth scroll to top on button click
+    toTop.addEventListener("click", (e) => {
+        e.preventDefault();  // Prevent default anchor behavior
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+});
diff --git a/style.css b/style.css
@@ -13,6 +13,10 @@
     box-sizing: border-box;
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 .logo-container {
     display: flex;
     align-items: center;
@@ -272,6 +276,36 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+.to-top {
+    background: white;
+    position: fixed;
+    bottom: 16px;
+    right: 32px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #1f1f1f;
+    text-decoration: none;
+    opacity: 0;
+    pointer-events:none;
+    transition: all .4s;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.to-top:hover {
+    background: #f0f0f0;
+}
+
+.to-top.active {
+    bottom: 32px;
+    pointer-events: auto;
+    opacity: 1; 
+}
+
 /* Events Section Css */
 
 .events {