Merge pull request #153 from CaptainTron/vaibranch

added scroll to top button when user slide down below 650px
SaptarshiSarkar12 · Oct 24, 2022 · ffd94a3 · ffd94a3
2 parents 50c83f0 + 6a0276d
commit ffd94a3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/Website/index.html b/Website/index.html
@@ -138,6 +138,8 @@ <h2>Contact Us</h2>
         Email</a>
     </div>
   </section>
+  <!-- Scroll to top button -->
+  <button onclick="totop()" id="mybtn" title="Go to top "> <i class="fa fa-arrow-up"></i> </button>
 
   <footer class="footer">
     <div class="social">

diff --git a/Website/script.js b/Website/script.js
@@ -246,4 +246,20 @@ function renderAssets(assets) {
     }
   }, "");
 }
+
+let mybutton = document.getElementById("mybtn")
+window.onscroll = function() {scrollFunction()}
+function scrollFunction(){
+  if(document.body.scrollTop > 650 || document.documentElement.scrollTop > 650){
+    mybutton.style.display = "block"
+  } else {
+    mybutton.style.display = "none"
+  }
+}
+function totop(){
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
+
+
 // END RELEASE
diff --git a/Website/style.css b/Website/style.css
@@ -1005,4 +1005,24 @@ header {
   border-radius: 2em;
   background-color: #4caf50;
   color: var(--font-color);
+}
+/* Scroll to top button styling starts from here */
+#mybtn{
+  display: none;
+  position: fixed;
+  bottom: 18px;
+  right: 19px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #0a5a97;
+  color: wheat;
+  cursor: pointer;
+  padding: 15px;
+  border-radius: 200px;
+  font-size: 18px;
+
+}
+#mybtn:hover{
+  background-color: rgb(18, 29, 59);
 }