feat: Added scroll-to-top feature

Author: m-code12

index.html

@@ -56,6 +56,37 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="/materialjs/material.min.css" />
   <link rel="stylesheet" href="style.css" />
+  <style type="text/css">
+    html {
+        scroll-behavior: smooth;
+      }
+
+      #myBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  font-size: 25px;
+  border: none;
+  outline: none;
+  background-color: #87CEFA;
+  color: white;
+  font-color: blue;
+  cursor: pointer;
+  padding: 14px;
+  border-radius: 30%;
+}
+
+.fa-angle-double-up {
+  
+  font-weight: bolder;
+}
+
+#myBtn:hover {
+  background-color: #D3D3D3;
+}
+</style>
   <script defer src="/materialjs/material.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
@@ -132,6 +163,8 @@
         </div>
       </div>
 
+      <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up p-1 font-weight-bold" aria-hidden="true" style="color: black;"></i></button>
+
       <div class="nwoc-content">
         <a id="about"></a>
         <h3>About</h3>
@@ -518,6 +551,27 @@ <h4>Tell your friends about NWoC</h4>
 
   }());
 </script>
+<script>
+//Get the button
+var 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
+function topFunction() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
+</script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
 <script>

style.css

@@ -9,6 +9,35 @@ body {
   background-color: #cbeef8;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
+#myBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  font-size: 25px;
+  border: none;
+  outline: none;
+  background-color: #87CEFA;
+  color: white;
+  font-color: blue;
+  cursor: pointer;
+  padding: 14px;
+  border-radius: 30%;
+}
+
+.fa-angle-double-up {
+  font-weight: bolder;
+}
+
+#myBtn:hover {
+  background-color: #D3D3D3;
+}
+
 p {
     font-size: 16px;
 }