Merge pull request #297 from schoudhury2/codespace-special-zebra-pjr4…

…4gr5gw45c69gx

Implemented scroll to top feature

index.html

@@ -81,6 +81,10 @@ <h6 id="confirm-msg-all">Are you sure you want to delete this task?</h6>
   </div>
   <!-- ------------------- -->
   <div class="container">
+    <!-- <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> -->
+    <img onclick="topFunction()" src="./scroll_img.svg" id="myBtn">
+
+
     <!-- <header class="text-center">
         <div class="container">
           <div class="row">
@@ -147,6 +151,7 @@ <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
     </div>
   </div>
   <br /><br />
+
   <div >
   <h2 style=" text-align: center" class="mt-2 animate__animated animate__fadeInUp animate__slow  animate__delay-3s">Why Simply Tasked?</h2>
   <p style="padding: 0px 10px; text-align: center" class="mb-4 animate__animated animate__fadeInUp animate__slow  animate__delay-3s">
@@ -163,7 +168,7 @@ <h2 style=" text-align: center" class="mt-2 animate__animated animate__fadeInUp
   </div>
   </div>
 
-
+<script src="scroll.js"></script>
   <script src="index.js"></script>
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js">

scroll.js

@@ -0,0 +1,106 @@
+/*
+// Get the button:
+let mybutton = document.getElementById("myBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document smoothly
+function topFunction() {
+  // For Safari
+  document.body.scrollTop = 0;
+  // For Chrome, Firefox, IE and Opera
+  document.documentElement.scrollTop = 0;
+
+  // Check for browser support
+  if ("scrollBehavior" in document.documentElement.style) {
+    // Smooth scroll to the top
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  } else {
+    // Fallback for browsers that do not support smooth scrolling
+    window.scrollTo(0, 0);
+  }
+}
+*/
+// Get the button:
+//final
+
+let mybutton = document.getElementById("myBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document smoothly
+function topFunction() {
+  // For Safari
+  document.body.scrollTop = 0;
+  // For Chrome, Firefox, IE, and Opera
+  document.documentElement.scrollTop = 0;
+
+  // Check for browser support
+  if ("scrollBehavior" in document.documentElement.style) {
+    // Smooth scroll to the top
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  } else {
+    // Fallback for browsers that do not support smooth scrolling
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }
+}
+
+/*
+const topButton = document.getElementById("myBtn");
+const contentWrapper = document.querySelector(".contentWrapper");
+
+function scrollUp() {
+  if (contentWrapper.scrollTop > 100) {
+    topButton.style.display = "block";
+  } else {
+    topButton.style.display = "none";
+  }
+}
+
+function getTop() {
+  contentWrapper.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
+
+contentWrapper.addEventListener("scroll", scrollUp);
+topButton.addEventListener("click", getTop);
+  */

style.css

@@ -63,6 +63,27 @@ body {
   transition: 0.4s;
   border-radius: 30px;
 }
+html{
+
+  scroll-behavior: smooth;
+
+}
+#myBtn {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 50px; /* Place the button at the bottom of the page */
+  left: 30px; /* Place the button 30px from the left */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  width: 30px;
+  height: 30px;
+}
+
+#myBtn:hover {
+  background-color: #06d1f5; /* Add a dark-grey background on hover */
+}
 
 .slider:before {
   position: absolute;