Add scroll to top button (#63)

* Update womenhealth.html * Update testimonial.html * Update pregnancy.html * Update ovulation.html * Update menstrualcycle.html * Update faq.html * Update exercises.html * Update about.html * Add files via upload * Add files via upload
nisha331 · Feb 26, 2023 · 3d14c3c · 3d14c3c
1 parent 62ed8bb
commit 3d14c3c
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 15 deletions.
diff --git a/about.html b/about.html
@@ -6,7 +6,7 @@
     <link rel="icon" href="icon.png" type="image/icon type">
     <link rel="stylesheet" href="css_files/styleaboutus.css">
     <!-- bootstrap icon link Used in Header and footer-->
-
+    <link rel="stylesheet" href="css_files/scrolltoTop.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
     <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 
@@ -90,5 +90,27 @@ <h1 class="heading">About Us</h1>
     </footer>
 
     <!-- footer -->
+    <div class="scrollToTopContainer">
+      <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+        <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+      </button>
+    </div>
   </body>
+  <script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
 </html>
diff --git a/css_files/scrolltoTop.css b/css_files/scrolltoTop.css
@@ -0,0 +1,21 @@
+.scrollToTopContainer {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin: 0 2rem 2rem 0;
+
+    height: fit-content;
+    width: fit-content;
+    z-index: 100000;
+  }
+
+  .scrollToTopButton {
+    border-radius: 100%;
+    height: 42px;
+    width: 42px;
+    background-color: rgba(255, 255, 255, 0.9);
+
+    border: 0;
+    cursor: pointer;
+    box-shadow: 0px 0px 10px 1px palevioletred;
+  }
diff --git a/exercises.html b/exercises.html
@@ -3,6 +3,7 @@
 <head>
 	<title>Exercises</title>
 	<link rel="stylesheet" type="text/css" href="css_files/exercises.css">
+    <link rel="stylesheet" href="css_files/scrolltoTop.css">
 </head>
 <body>
 	<header>
@@ -69,8 +70,32 @@ <h3>7: Swimmimg</h3>
             <div class="image"><img src="./images/swimming.png" alt="failed to load" ></div>
         </div>
 	</main>
+
+
 	<footer>
 		<p>&copy; 2023</p>
 	</footer>
+    <div class="scrollToTopContainer">
+        <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+          <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+        </button>
+      </div>
 </body>
+<script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
 </html>
diff --git a/faq.html b/faq.html
@@ -6,6 +6,7 @@
   <title>FAQ - Frequently Asked Questions</title>
   <link rel="icon" href="icon.png" type="image/icon type">
   <link rel="stylesheet" href="faq.css">
+  <link rel="stylesheet" href="css_files/scrolltoTop.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:400,700">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 
@@ -411,9 +412,30 @@ <h1 class="heading">FAQ - Frequently Asked Questions</h1>
     </div>
 
   </div>
-
+  <div class="scrollToTopContainer">
+    <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+      <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+    </button>
+  </div>
   <script src="./faq.js">
   </script>
 </body>
-
-</html>
+<script>
+  const scrollToTopHandler = () => {
+let btn = document.getElementById("scrollToButton");
+if (window.scrollY > 500) {
+  btn.className = "scrollToTopButton";
+} else {
+  btn.className = "HideElement scrollToTopButton";
+}
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+window.scrollTo({
+  top: 0,
+  behavior: "smooth"
+});
+})
+</script>
+
+</html>
diff --git a/images/Chevron.svg b/images/Chevron.svg
diff --git a/menstrualcycle.html b/menstrualcycle.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MENSTRUAL-CYCLE</title>
     <!-- bootstrap icon link Used in Header and footer-->
-
+    <link rel="stylesheet" href="css_files/scrolltoTop.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
     <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 
@@ -107,5 +107,27 @@ <h1 class="heading">Menstrual Cycle</h1>
     </footer>
 
     <!-- footer -->
+    <div class="scrollToTopContainer">
+      <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+        <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+      </button>
+    </div>
   </body>
+  <script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
 </html>
diff --git a/ovulation.html b/ovulation.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:400,700">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 
-
+<link rel="stylesheet" href="css_files/scrolltoTop.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
   </head>
   <body>
@@ -89,5 +89,26 @@ <h1 class="heading">Ovulation</h1>
         <p class="end"><a href="https://www.womenshealth.gov/menstrual-cycle/ovulation">Office on Women's Health. (2019). Ovulation. </a></p>
       </div>
 
+    </div><div class="scrollToTopContainer">
+      <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+        <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+      </button>
     </div>
-  </body>
+  </body>
+  <script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
diff --git a/pregnancy.html b/pregnancy.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="css_files/stylepregnancy.css">
     <!-- bootstrap icon link Used in Header and footer-->
 
+    <link rel="stylesheet" href="css_files/scrolltoTop.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
     <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 
@@ -104,5 +105,28 @@ <h1 class="heading">Pregnancy</h1>
     </footer>
 
     <!-- footer -->
+    <div class="scrollToTopContainer">
+      <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+        <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+      </button>
+    </div>
   </body>
+  <script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
+
 </html>
diff --git a/testimonial.html b/testimonial.html
@@ -8,7 +8,8 @@
 
     <link rel="stylesheet" href="../css_files/swiper-bundle.min.css">
 
-    <link rel="stylesheet" href="../css_files/testimonial.css">
+    <link rel="stylesheet" href="css_files/scrolltoTop.css">
+    <link rel="stylesheet" href="css_files/testimonial.css">
 
 </head>
 
@@ -41,7 +42,7 @@ <h2 class="name">Amelia </h2>
                         <span class="overlay"> </span>
 
                         <div class="card-image">
-                            <img src="../images/face2.jpeg" alt=" " class="card-img">
+                            <img src="images/face2.jpeg" alt=" " class="card-img">
                         </div>
                     </div>
                     <div class="card-content">
@@ -187,10 +188,30 @@ <h2 class="name">Emilia K.</h2>
         <div class="swiper-button-prev swiper-navBtn"></div>
         <div class="swiper-pagination"></div>
     </div>
-
+    <div class="scrollToTopContainer">
+        <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+          <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+        </button>
 </body>
 
 <script src="../js_files/swiper-bundle.min.js"></script>
 <script src="../js_files/testimonial.js"></script>
+<script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
 
 </html>
diff --git a/womenhealth.html b/womenhealth.html
@@ -3,10 +3,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>WOMEN-HEALTH</title>
-    <link rel="icon" href="icon.png" type="image/icon type">
+    <link rel="icon" href="images/icon.png" type="image/icon type">
     <link rel="stylesheet" href="css_files/stylewomenhealth.css">
     <!-- bootstrap icon link Used in Header and footer-->
-
+    <link rel="stylesheet" href="css_files/scrolltoTop.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
     <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
   </head>
+
   <body>
 
     <!-- Header -->
@@ -28,10 +29,10 @@
           <ul class="navbar-nav">
 
             <li class="nav-item">
-              <a class="nav-link" href="#footer"><img class="d-inline-block align-top image-border" src="images/Calendar1.png" width="45" height="45"/></a>
+              <a class="nav-link" href="#footer"><img class="d-inline-block align-top image-border" src="images/calendar.png" width="45" height="45"/></a>
             </li>
             <li class="nav-item active">
-              <a class="nav-link" href="index.html"><img class="d-inline-block align-top image-border" src="images/Girl.png" width="45" height="45"/></a>
+              <a class="nav-link" href="index.html"><img class="d-inline-block align-top image-border" src="images/woman.png" width="45" height="45"/></a>
             </li>
           </ul>
         </div>
@@ -112,7 +113,28 @@ <h1 class="heading">Women Health</h1>
         </div>
       </div>
     </footer>
-
+    <div class="scrollToTopContainer">
+      <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
+        <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+      </button>
+    </div>
     <!-- footer -->
   </body>
+  <script>
+    const scrollToTopHandler = () => {
+  let btn = document.getElementById("scrollToButton");
+  if (window.scrollY > 500) {
+    btn.className = "scrollToTopButton";
+  } else {
+    btn.className = "HideElement scrollToTopButton";
+  }
+}
+window.addEventListener("scroll", scrollToTopHandler);
+document.getElementById("scrollToButton").addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+})
+  </script>
 </html>