Merge pull request #207 from vishalverma9572/scroll_to_top

Adding Scroll_to_Top button in default.html
collabnix · Oct 9, 2023 · cc92b99 · cc92b99
2 parents 70b115f + 81fd44d
commit cc92b99
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -19,6 +19,31 @@
     <meta name="theme-color" content="#157878">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   </head>
+  <!-- this is the added Style for Scroll_to_top button -->
+  <style>
+    #Scroll_to_top {
+    display: none; /* Hidden by default */
+    position: fixed; /* Fixed/sticky position */
+    bottom: 20px; 
+    right: 30px; 
+    z-index: 99; /* Make sure it does not overlap */
+    border: 3px solid #155799;  
+    outline: none; 
+    background-color: transparent;
+    color: #159957;  
+    cursor: pointer; 
+    padding: 15px; 
+    border-radius: 35px; 
+    font-size: 20px; 
+    font-weight: 800;
+  }
+
+  #Scroll_to_top:hover {
+    /* you can add a background color if you want */
+    font-size: 1.4rem;
+  }
+  </style>
+  <!-- the above is the added Style for Scroll_to_top button -->
   <body>
 
 
@@ -51,6 +76,10 @@ <h2 class="project-tagline">{{ page.description | default: site.description | de
      {% endif %}
 
     </header>
+    <!--  this is the added html for Scroll_to_top button --> 
+    <button onclick="topFunction()" id="Scroll_to_top" title="Go to top">&#8679;</button>
+    <!--  the above is the added html for Scroll_to_top button --> 
+
 
 
 
@@ -83,6 +112,28 @@ <h3> Join Collabnix Community on Discord </h3>
     <!-- Place this tag in your head or just before your close body tag. -->
 
 <script async defer src="https://buttons.github.io/buttons.js"></script>
+<!-- this is the added Script for Scroll_to_top button -->
+<script>
+  let mybutton = document.getElementById("Scroll_to_top");
+
+// 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 will click on the button, scroll to the top of the document
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
+</script>
+<!-- the above is the added Script for Scroll_to_top button -->
   </body>
 </html>