Merge pull request #86 from anshulkansal04/main

Added Scroll to Top On Home Page
JAYESHBATRA · Jan 7, 2024 · 20fd351 · 20fd351
2 parents 45316ad + 072c1a3
commit 20fd351
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   <title>Virtuo Learn</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="media-queries.css">
+  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="./assets/logo.png">
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@@ -54,14 +55,14 @@
       <li>
         <a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a>
       </li>
-<li>
-  <a href="https://www.twitter.com" target="_blank">
-    <img src="assets/twitterLogo.jpg" alt="Twitter Logo" id="tw-logo" style="
+      <li>
+        <a href="https://www.twitter.com" target="_blank">
+          <img src="assets/twitterLogo.jpg" alt="Twitter Logo" id="tw-logo" style="
     border-radius: 50%;
     width: full;
 ">
-  </a>
-</li>
+        </a>
+      </li>
     </ul>
   </div>
 
@@ -101,7 +102,7 @@ <h1 id="automatic-change">Learn Interactively</h1>
         <a href="#features" class="primary-button get-started-btn">Get Started</a>
       </div>
       <div class=" header-right">
-          <img src="./assets/asset 2.svg" alt="hero image" class="hero-image block md:w-[40vw] mx-auto my-0 w-[80vw]">
+        <img src="./assets/asset 2.svg" alt="hero image" class="hero-image block md:w-[40vw] mx-auto my-0 w-[80vw]">
       </div>
     </div>
   </header>
@@ -361,6 +362,8 @@ <h2>CareerLaunch <br>Accelerator</h2>
     </div>
   </div>
 
+  <button onclick="topFunction()" class="icon-arrow-up" id="myBtn" title="Scroll to Top"></button>
+
   <!-- footer -->
   <!-- <a href="#" class="company-logo">
         <img src="./assets/asset 41.png" alt="company logo">
@@ -384,8 +387,23 @@ <h2>CareerLaunch <br>Accelerator</h2>
       hamburger.classList.toggle("active");
       navMenu.classList.toggle("active");
     })
+
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+      if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
+        document.getElementById("myBtn").style.display = "block";
+      } else {
+        document.getElementById("myBtn").style.display = "none";
+      }
+    }
+
+    function topFunction() {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
   </script>
   <script src="scroll-reveal.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -652,3 +652,30 @@ footer {
 .popup-ultimate:hover {
 	box-shadow: 8px 18px 25px #f5b55a;
 }
+
+#myBtn {
+    position: fixed;
+    bottom: 20px;
+    right: 10px;
+    height: 60px;
+    width: 60px;
+    display: none;
+    place-items: center;
+    border-radius: 50%;
+    transition: opacity 0.3s, background-color 0.3s;
+    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.3),
+                inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
+                inset 4px 4px 6px 0 rgba(97, 96, 96, 0.2);
+    cursor: pointer;
+}
+
+#myBtn:hover{
+    opacity: 1;
+    background-color: #91f0c0;
+    animation: animate 1s linear infinite;
+}
+@keyframes animate{
+    50%{
+        transform: translateY(3px);
+    }
+}