scroll to top button added to all pages

JAYESHBATRA · Jun 8, 2024 · 337dd8e · 337dd8e
1 parent b196b7d
commit 337dd8e
Show file tree

Hide file tree

Showing 12 changed files with 262 additions and 2 deletions.
diff --git a/Pages/3D-Visualizations/index.html b/Pages/3D-Visualizations/index.html
@@ -136,6 +136,13 @@ <h2>Deoxyribonucleic acid(DNA)</h2>
     </div>
   </div>
 
+  <button
+      onclick="topFunction()"
+      class="icon-arrow-up"
+      id="myBtn"
+      title="Scroll to Top"
+    ></button>
+
 
     <!-- footer -->
     <!-- <a href="#" class="company-logo">
@@ -160,6 +167,26 @@ <h2>Deoxyribonucleic acid(DNA)</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>
 

diff --git a/Pages/3D-Visualizations/style.css b/Pages/3D-Visualizations/style.css
@@ -325,4 +325,27 @@ nav {
     nav a {
       font-weight: normal;
       font-size: .90em;
+    }
+
+    #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;
+        z-index: 1;
+        border:none;
+    }
+    #myBtn:hover{
+        opacity: 1;
+        background-color: #91f0c0;
+        animation: animate 1s linear infinite;
     }
diff --git a/Pages/About-Us/index.html b/Pages/About-Us/index.html
@@ -7,6 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Virtuo Learn</title>
   <link rel="stylesheet" href="style.css">
+  <link
+      href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
+      rel="stylesheet"
+    />
   <link rel="stylesheet" href="media-queries.css">
   <link rel="icon" type="image/x-icon" href="../../assets/logo.png">
   <script src="https://unpkg.com/scrollreveal"></script>
@@ -131,6 +135,13 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
     </p>
   </div>
 </div>
+
+<button
+onclick="topFunction()"
+class="icon-arrow-up"
+id="myBtn"
+title="Scroll to Top"
+></button>
   <!-- footer -->
   <!-- <a class="no-underline inline-block" href="#" class="company-logo">
         <img src="./assets/asset 41.png" alt="company logo">
@@ -174,6 +185,26 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
         observer.observe(wrap);
       });
     });
+
+    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>
 

diff --git a/Pages/About-Us/style.css b/Pages/About-Us/style.css
@@ -110,4 +110,27 @@ nav {
     nav a {
       font-weight: normal;
       font-size: .90em;
-    }
+    }
+
+    #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;
+      z-index: 1;
+      border:none;
+  }
+  #myBtn:hover{
+      opacity: 1;
+      background-color: #91f0c0;
+      animation: animate 1s linear infinite;
+  }
diff --git a/Pages/Doubt Engine/index.html b/Pages/Doubt Engine/index.html
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Virtuo Learn</title>
     <link rel="stylesheet" href="style.css">
+    <link
+      href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="media-queries.css">
     <link rel="icon" type="image/x-icon" href="../HomePage/assets/logo.png">
     <script src="https://unpkg.com/scrollreveal"></script>
@@ -99,6 +103,13 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
       <p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para-2">While we work on completing this page, please feel free to explore the rest of our website. We offer a wide range of products and services that we believe will be of interest to you. From our user-friendly interface to our top-of-the-line customer service, we strive to provide you with the best possible experience.</p>
     </div>
 
+    <button
+      onclick="topFunction()"
+      class="icon-arrow-up"
+      id="myBtn"
+      title="Scroll to Top"
+    ></button>
+
 
     <!-- footer -->
     <footer class="h-auto w-screen bg-[#ebf2fa] mt-[5vh] pt-10 bottom-0 inset-x-0">
@@ -120,6 +131,26 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
         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>
 

diff --git a/Pages/Doubt Engine/style.css b/Pages/Doubt Engine/style.css
@@ -89,4 +89,27 @@
     nav a {
       font-weight: normal;
       font-size: .90em;
-    }
+    }
+
+    #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;
+      z-index: 1;
+      border:none;
+  }
+  #myBtn:hover{
+      opacity: 1;
+      background-color: #91f0c0;
+      animation: animate 1s linear infinite;
+  }
diff --git a/Pages/Quizes/index.html b/Pages/Quizes/index.html
@@ -12,6 +12,7 @@
       href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
       rel="stylesheet"
     />
+
     <script src="https://unpkg.com/scrollreveal"></script>
 </head>
 <body>

diff --git a/Pages/Quizes/style.css b/Pages/Quizes/style.css
@@ -291,6 +291,7 @@ ul {
                 inset 4px 4px 6px 0 rgba(97, 96, 96, 0.2);
     cursor: pointer;
 	z-index: 1;
+    border:none;
 }
 
 #myBtn:hover{

diff --git a/Pages/Simulation/index.html b/Pages/Simulation/index.html
@@ -122,6 +122,13 @@ <h2>Orbital Configuration</h2>
     </div>
   </div>
 
+  <button
+  onclick="topFunction()"
+  class="icon-arrow-up"
+  id="myBtn"
+  title="Scroll to Top"
+></button>
+
 
     <!-- footer -->
     <!-- <a href="#" class="company-logo">
@@ -146,6 +153,26 @@ <h2>Orbital Configuration</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>
 

diff --git a/Pages/Simulation/style.css b/Pages/Simulation/style.css
@@ -324,4 +324,27 @@ nav {
     nav a {
       font-weight: normal;
       font-size: .90em;
+    }
+
+    #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;
+        z-index: 1;
+        border:none;
+    }
+    #myBtn:hover{
+        opacity: 1;
+        background-color: #91f0c0;
+        animation: animate 1s linear infinite;
     }
diff --git a/Pages/Videos/index.html b/Pages/Videos/index.html
@@ -239,6 +239,13 @@ <h2>Endocrine System</h2>
     </div>
   </div>
 
+  <button
+  onclick="topFunction()"
+  class="icon-arrow-up"
+  id="myBtn"
+  title="Scroll to Top"
+></button>
+
 
     <!-- footer -->
     <!-- <a href="#" class="company-logo">
@@ -263,6 +270,26 @@ <h2>Endocrine System</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>
 

diff --git a/Pages/Videos/style.css b/Pages/Videos/style.css
@@ -329,4 +329,27 @@ nav {
     nav a {
       font-weight: normal;
       font-size: .90em;
+    }
+
+    #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;
+        z-index: 1;
+        border:none;
+    }
+    #myBtn:hover{
+        opacity: 1;
+        background-color: #91f0c0;
+        animation: animate 1s linear infinite;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ @@
           href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
           rel="stylesheet"
         />
         <script src="https://unpkg.com/scrollreveal"></script>
     </head>
     <body>
@@ Expand Down @@