From 337dd8e449b89ef82a882b1d1bb5bd2da3de1ac2 Mon Sep 17 00:00:00 2001
From: paulkrishanu4 <paulkrishanu84@gmail.com>
Date: Sat, 8 Jun 2024 14:25:58 +0530
Subject: [PATCH] scroll to top button added to all pages

---
 Pages/3D-Visualizations/index.html | 27 ++++++++++++++++++++++++++
 Pages/3D-Visualizations/style.css  | 23 ++++++++++++++++++++++
 Pages/About-Us/index.html          | 31 ++++++++++++++++++++++++++++++
 Pages/About-Us/style.css           | 25 +++++++++++++++++++++++-
 Pages/Doubt Engine/index.html      | 31 ++++++++++++++++++++++++++++++
 Pages/Doubt Engine/style.css       | 25 +++++++++++++++++++++++-
 Pages/Quizes/index.html            |  1 +
 Pages/Quizes/style.css             |  1 +
 Pages/Simulation/index.html        | 27 ++++++++++++++++++++++++++
 Pages/Simulation/style.css         | 23 ++++++++++++++++++++++
 Pages/Videos/index.html            | 27 ++++++++++++++++++++++++++
 Pages/Videos/style.css             | 23 ++++++++++++++++++++++
 12 files changed, 262 insertions(+), 2 deletions(-)

diff --git a/Pages/3D-Visualizations/index.html b/Pages/3D-Visualizations/index.html
index a888ac6e8..5cd17433b 100644
--- 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
index 7a689c5b5..852aeee84 100644
--- 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;
     }
\ No newline at end of file
diff --git a/Pages/About-Us/index.html b/Pages/About-Us/index.html
index d61cdcfe1..4a28bfdbf 100644
--- 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
index 81246ff87..391799f86 100644
--- 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;
-    }
\ No newline at end of file
+    }
+
+    #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;
+  }
\ No newline at end of file
diff --git a/Pages/Doubt Engine/index.html b/Pages/Doubt Engine/index.html
index 84f045c1f..081104417 100644
--- 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
index 18bf231c2..a685a184c 100644
--- a/Pages/Doubt Engine/style.css	
+++ b/Pages/Doubt Engine/style.css	
@@ -89,4 +89,27 @@
     nav a {
       font-weight: normal;
       font-size: .90em;
-    }
\ No newline at end of file
+    }
+
+    #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;
+  }
\ No newline at end of file
diff --git a/Pages/Quizes/index.html b/Pages/Quizes/index.html
index 3a71d3f85..9b962dfc4 100644
--- 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
index 800cf3a58..e227fc95a 100644
--- 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
index 7e40ef2a9..0d7d437bb 100644
--- 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
index d2ce7bf95..a0d32b8d6 100644
--- 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;
     }
\ No newline at end of file
diff --git a/Pages/Videos/index.html b/Pages/Videos/index.html
index 1a4d5a54f..6dee4a118 100644
--- 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
index ecf2afe8e..7d305c342 100644
--- 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;
     }
\ No newline at end of file