Merge pull request #93 from m-code12/Scroll_to_top

feat: Added scroll-to-top feature

Author: s-ayush2903

archive.html

@@ -48,6 +48,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto">
     <link rel="stylesheet" href="/materialjs/material.min.css" />
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
     <script defer src="/materialjs/material.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
@@ -148,6 +149,9 @@ <h3>2019</h3>
                 </ul>
               </div>
             </div>
+
+            <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true" style="color: black;font-weight: bolder;"></i></button>
+
             <div class="mdl-cell mdl-cell--6-col">
               <div class="nwoc-repo-card">
                 <img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.0.0/svg/mark-github.svg"/>
@@ -1388,4 +1392,27 @@ <h3>Previous Sponsors</h3>
       </main>
     </div>
   </body>
+
+<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>
+
 </html>

index.html

@@ -56,6 +56,7 @@
   <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" />
+    
   <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 +133,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>
@@ -520,6 +523,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>

projects.html

@@ -48,6 +48,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto">
     <link rel="stylesheet" href="/materialjs/material.min.css" />
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
     <script defer src="/materialjs/material.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
@@ -155,6 +156,9 @@ <h3>NWoC 2020 Projects</h3>
                 </ul>
               </div>
             </div>
+
+            <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true" style="color: black;font-weight: bolder;"></i></button>
+
             <div class="mdl-cell mdl-cell--6-col">
               <div class="nwoc-repo-card">
                 <img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.0.0/svg/mark-github.svg"/>
@@ -683,4 +687,25 @@ <h3>NWoC 2020 Projects</h3>
       </main>
     </div>
   </body>
+  <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>
 </html>

style.css

@@ -9,6 +9,37 @@ 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: 6px;
+  border-radius: 50%;
+  height: 50px;
+  width: 50px;
+}
+
+.fa-angle-double-up {
+  font-weight: bolder;
+}
+
+#myBtn:hover {
+  background-color: #D3D3D3;
+}
+
 p {
     font-size: 16px;
 }
@@ -102,6 +133,13 @@ a {
   }
 }
 
+@media screen and (max-width: 961px) {
+  #myBtn {
+    bottom: 38px;
+    right: 20px;
+  }
+}
+
 @media screen and (max-width: 960px) {
   .mdl-layout__header-row {
     padding: 0 10px 0 20px;