From 0e9fc846af415e710a5beef38a93af85a5ce7503 Mon Sep 17 00:00:00 2001
From: Pratiksha Sankhe <sankhepratiksha3@gmail.com>
Date: Sun, 5 Mar 2023 14:13:12 +0530
Subject: [PATCH] Scroll to top feature added

---
 community.html    |  5 +++++
 css/style.css     | 28 ++++++++++++++++++++++++++++
 index.html        |  4 ++++
 js/scrolltotop.js | 20 ++++++++++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 js/scrolltotop.js
diff --git a/community.html b/community.html
index 6ac78a1..506e97b 100644
--- a/community.html
+++ b/community.html
@@ -31,6 +31,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <title>caMicroscope</title>
     <!--
 
@@ -53,6 +55,8 @@
   </head>
 
   <body style="background-color: #fcfcfc">
+    <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-up"></i>
+    </button>
     <nav class="navbar">
       <div class="container">
         <a href="#" class="nav-logo logo__color">caMicroscope</a>
@@ -135,5 +139,6 @@
     </div>
     <script src="/js/navbar-responsive.js"></script>
     <script src="/js/footer.js"></script>
+    <script src="/js/scrolltotop.js"></script>
   </body>
 </html>
diff --git a/css/style.css b/css/style.css
index 183f682..d63003e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -309,3 +309,31 @@ a {
     line-height: 10px;
   }
 }
+
+#myBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  font-size: 18px;
+  border: none;
+  outline: none;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+  padding: 15px;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  transition: 0.15ss;
+}
+
+#myBtn:hover {
+  background-color: #9a2ca0;
+  border:2px solid white;
+  padding: 15px;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 70eec90..d670efe 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>caMicroscope</title>
     <!--
 
@@ -53,6 +54,8 @@
   </head>
 
   <body style="background-color: #fcfcfc">
+    <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-up"></i>
+    </button>
     <div class="main-conatiner">
     <nav class="navbar">
       <div class="container">
@@ -276,5 +279,6 @@
     </div>
     <script src="/js/navbar-responsive.js"></script>
     <script src="/js/footer.js"></script>
+    <script src="/js/scrolltotop.js"></script>
   </body>
 </html>
diff --git a/js/scrolltotop.js b/js/scrolltotop.js
new file mode 100644
index 0000000..501eceb
--- /dev/null
+++ b/js/scrolltotop.js
@@ -0,0 +1,20 @@
+
+// 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
+function topFunction() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
\ No newline at end of file
