Merge pull request #77 from Kapileswar-Moharana/Back-Top

Added Button Including KeyFrames & Functions

dashbboard.js

@@ -0,0 +1,20 @@
+// Back-Top Button
+document.addEventListener("scroll", function() {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const backToTopButton = document.querySelector(".back-to-top");
+
+    // show/hide back to top button based on scroll position
+    if (scrollTop > 50) {
+        document.body.classList.add("scroll-down");
+    } else {
+        document.body.classList.remove("scroll-down");
+    }
+});
+
+// Function to scroll to the top when the button is clicked
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+}

dashboard.css

@@ -262,43 +262,45 @@ nav li a:hover{
     }
 }
 
-/* Animations */
-@keyframes slideIn {
-    from {
-      transform: translateX(-100%);
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideOut {
-    from {
-      transform: translateX(100%);
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideDown {
-    from {
-      transform: translateY(-100%);
-    }
-
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fadeIn {
+
+
+/* back to top button styles */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #213c15;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 24px;
+    display: none; /* hide by default */
+    transition: background-color 0.3s, transform 0.3s;
+    z-index: 999; 
+    animation: fadeInUp 0.5s ease; /* Entrance animation */
+}
+
+.back-to-top:hover {
+    background-color: #3a8f0f;
+    transform: scale(1.1); /* Add a slight scale effect on hover */
+}
+
+/* show the button when user scrolls down */
+body.scroll-down .back-to-top {
+    display: block;
+}
+/* Entrance animation keyframes */
+@keyframes fadeInUp {
     from {
-      opacity: 0;
+        opacity: 0;
+        transform: translateY(20px);
     }
-
     to {
-      opacity: 1;
+        opacity: 1;
+        transform: translateY(0);
     }
-  }
+}
+
+

dashboard.html

@@ -89,7 +89,10 @@ <h1 id="conf" class="heading">Talks and Conferences</h1>
             <div data-tilt class="right">Click Here</div>
         </div>
     </main>
-
+ <!-- Back to Top Button -->
+    <div class="back-to-top" onclick="scrollToTop()">
+        <span>&uarr;</span>
+    </div>
 
     <div class="foot">
         <div data-aos="fade-right" data-aos-duration="1000"  class="emergency col1">
@@ -202,6 +205,11 @@ <h1>Developers</h1><br>
         });
 
     </script>
+
+    <!-- JavaScript -->
+    <script src="dashbboard.js"></script>
+
 <script type="text/javascript" src="vanilla-tilt.js"></script>
+
 </body>
 </html>