Made the required changes

Author: m-code12

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,37 +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" />
-  <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>
 

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

@@ -26,8 +26,10 @@ html {
   color: white;
   font-color: blue;
   cursor: pointer;
-  padding: 14px;
-  border-radius: 30%;
+  padding: 6px;
+  border-radius: 50%;
+  height: 50px;
+  width: 50px;
 }
 
 .fa-angle-double-up {
@@ -131,6 +133,13 @@ a {
   }
 }
 
+@media screen and (max-width: 961px) {
+  #myBtn {
+    bottom: 20px;
+    right: 15px;
+  }
+}
+
 @media screen and (max-width: 960px) {
   .mdl-layout__header-row {
     padding: 0 10px 0 20px;