Issue nisha331#87 (nisha331#91)

* favicon * scroll up button * scroll up button
Tavish108 · Mar 8, 2023 · 66fd01d · 66fd01d
1 parent 36899b9
commit 66fd01d
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/css_files/style.css b/css_files/style.css
@@ -398,9 +398,44 @@
       justify-content:center;
       align-items:center;
     }
+    .back-to-top{
+      bottom: 2rem;
+    }
   }
   @media(min-width:992px){
     .image{
       display:block;
     }
   }
+
+  .back-to-top {
+    position: fixed;
+    right: 2rem;
+    bottom: 1rem;
+}
+.hidden {
+    display: none;
+        opacity: 0%;
+
+  }
+.back-to-top {
+    position: fixed;
+    right: 2rem;
+    bottom: 4rem;
+    border-radius: 100%;
+    background: #EB1365;
+    padding: 0.2rem;
+    border: none;
+    cursor: pointer;
+    opacity: 100%;
+    transition: opacity 0.5s;
+  }
+  .back-to-top-icon {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    color: #ffd7e9;
+  }
+  .back-to-top:hover {
+    background: black;
+  }
diff --git a/index.html b/index.html
@@ -242,6 +242,21 @@ <h5 class="card-title mb-3">Women Health</h5>
             <a class="linkedin" href="https://www.linkedin.com/in/nisha-yadav-2950351ab/" target="_blank">
               <i class="fa fa-linkedin"></i>
             </a>
+            <button class="back-to-top hidden">
+              <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="back-to-top-icon"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M7 11l5-5m0 0l5 5m-5-5v12"
+              />
+            </svg></button>
 
 
           </div>
@@ -260,6 +275,34 @@ <h5 class="card-title mb-3">Women Health</h5>
       loader.classList.add("disappear");
     }
   </script>
+  <script>
+  const showOnPx = 100;
+  const backToTopButton = document.querySelector(".back-to-top")
+
+ const scrollContainer = () => {
+   return document.documentElement || document.body;
+  };
+
+document.addEventListener("scroll", () => {
+if (scrollContainer().scrollTop > showOnPx) {
+ backToTopButton.classList.remove("hidden")
+} else {
+ backToTopButton.classList.add("hidden")
+}
+})
+const goToTop = () => {
+document.body.scrollIntoView({
+ behavior: "smooth",
+});
+};
+backToTopButton.addEventListener("click", goToTop)
+var loader = document.querySelector(".loader");
+  window.addEventListener("load", vanish);
+  function vanish() {
+  loader.classList.add("disppear");
+
+}
+</script>