Merge pull request #1643 from laxmikandivalasa/laxmikandivalasa-patch-1

Added Scroll to top button

Author: sanjay-kv

Website/css/styles.css

@@ -475,7 +475,7 @@ div {
     background-color: #121245;
     padding: 10px 20px;
     border-radius: 15px;
-    height: 340px;
+    height: 450px;
     color: white;
     animation: slideInRight 0.3s ease-in-out;
     transition: background-color 0.3s ease;
@@ -553,7 +553,7 @@ div {
     background-color: #121245;
     padding: 10px 20px;
     border-radius: 15px;
-    height: 340px;
+    height: 450px;
     color: white;
     animation: slideInRight 1s ease-in-out;
     transition: background-color 0.3s ease;
@@ -2318,4 +2318,4 @@ body.blue-mode {
     /* Dark blue background for tooltips */
     color: #f1f1f1;
     /* Light text */
-}
+}

Website/index.html

@@ -21,6 +21,7 @@
     content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community" />
   <title>Machine Learning Repositories</title>
   <!-- <link rel="canonical" href="url-here" /> define base(root) link of deployment here -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <link rel="stylesheet" href="css/styles.css" />
   <link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
@@ -117,6 +118,35 @@
 
     .dark-mode .paragraph {
       color: #555;
+
+    body {
+            font-family: 'Poppins', sans-serif;
+            min-height: 2000px; /* Add some height to enable scrolling */
+            margin: 0;
+            padding: 0;
+        }
+
+        /* Scroll to Top Button Styles */
+        .top-btn {
+            display: none;
+            width: 50px;
+            height: 50px;
+            position: fixed;
+            bottom: 23px;
+            right: 44px;
+            background-color: #ab45e7;
+            color: #ffffff;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 18px;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .top-btn:hover {
+            background-color: #0056b3;
+        }
     }
   </style>
 </head>
@@ -742,7 +772,24 @@ <h4 class="h46">Contact</h4>
   </div>
 
 
+<button class="top-btn" id="goToTopBtn" onclick="goToTop()"> 
+        <i class="fa-solid fa-chevron-up"></i>
+    </button>
 
+    <script>
+         const goToTopBtn = document.getElementById("goToTopBtn");
+
+         window.onscroll = function () {
+            if (window.scrollY > 100) {
+                goToTopBtn.style.display = "flex"; // Use "flex" to center the icon
+            } else {
+                goToTopBtn.style.display = "none";
+            }
+        };
+        function goToTop() {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        }
+    </script>
   <script>
     const year = new Date().getFullYear();
     document.getElementById("year").textContent = year;
@@ -757,4 +804,4 @@ <h4 class="h46">Contact</h4>
   </script>
 </body>
 
-</html>
+</html>