fixed back to top button

bamr87 · Mar 7, 2024 · 6239313 · 6239313
1 parent 7d79c3f
commit 6239313
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 49 deletions.
diff --git a/_includes/sidebar-right.html b/_includes/sidebar-right.html
@@ -30,7 +30,9 @@
 
   <!-- Back to Top -->
 
-  <button onclick="backToTopBtn()" id="backToTopBtn" title="Go to top" class="btn btn-primary">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;
+  <button onclick="topFunction()" id="backToTopBtn" title="Go to top">
+    <span class="arrow">&uarr;</span>
+    <span class="text">Back to Top</span>
   </button>
 
 </div>

diff --git a/_sass/it-journey/custom.scss b/_sass/it-journey/custom.scss
@@ -1,3 +1,12 @@
+html, body {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
 .make-me-sticky {
     position: -webkit-sticky;
 	position: sticky;
@@ -39,14 +48,44 @@
     border-radius:10px;/* Rounded corners */
     font-size:18px;/* Increase font size */
   }
-
+
+#backToTopBtn {
+    .text {
+        display: inline-block;
+    }
+
+    .arrow {
+        display: none;
+    }
+
+    @media (max-width: 600px) {
+        .text {
+            display: none;
+        }
+
+        .arrow {
+            display: inline-block;
+        }
+    }
+}
+
   #backToTopBtn:hover { 
     background-color: #555; /* Add a dark-grey background on hover */ 
     opacity: 100%;
   }
 
-.img {
+img {
     display: inline-block;
+    max-width: 100%;
+    height: auto;
+}
+
+#navbar {
+    transition: transform 0.3s;
+}
+
+.hide-navbar {
+    transform: translateY(-100%);
 }
 
 // #box {

diff --git a/_sass/it-journey/it-journey.scss b/_sass/it-journey/it-journey.scss
@@ -15,9 +15,4 @@
 //     @extend .blockquote-footer;
 //   }
 
-// Extends the CSS for .img-fluid to <img> tags inside a <p> tag
 
-// p, img 
-//   {
-//     @extend .img-fluid;
-//   }
diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
@@ -1,43 +1,24 @@
-//Event listener to see if scrolling has started
-
-window.addEventListener('scroll', function() {
-  var element = document.getElementById('backToTopBtn');
-  var height = window.innerHeight;
-  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+document.addEventListener('DOMContentLoaded', (event) => {
+  let mybutton = document.getElementById("backToTopBtn");
 
-  if (scrollTop > height * 0.1) { // Adjust the 0.1 to control when the opacity starts changing
-      element.style.opacity = 0.2; // 20% opacity
-      element.style.display = "block"
-  } else {
-      element.style.opacity = 0; // 0% opacity
-      element.style.display = "none"
+  function topFunction() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    mybutton.style.opacity = "75%";
   }
-});
-
-function backToTopBtn() {
-
 
-
-  let mybutton = document.getElementById("backToTopBtn");
-
   if (mybutton) {
-    function topFunction() {
-      document.body.scrollTop = 0; // For Safari
-      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-      mybutton.style.opacity = "75%";
-    }
-
     mybutton.onclick = topFunction;
   }
 
   // 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";
     }
   }
-}
+});
diff --git a/pages/_notes/add-floating-back-to-top-button.md b/pages/_notes/add-floating-back-to-top-button.md
@@ -9,7 +9,7 @@ sub-title: ""
 author: ""
 excerpt: ""
 snippet: ""
-lastmod: 2023-03-11T18:03:19.840Z
+lastmod: 2024-03-07T00:01:36.787Z
 ---
 
 [w3 schools](https://www.w3schools.com/howto/howto_js_scroll_to_top.asp)
@@ -51,6 +51,26 @@ Style the button:
     font-size:18px;/* Increase font size */
   }
 
+#backToTopBtn {
+  .text {
+    display: inline-block;
+  }
+
+  .arrow {
+    display: none;
+  }
+
+  @media (max-width: 600px) {
+    .text {
+      display: none;
+    }
+
+    .arrow {
+      display: inline-block;
+    }
+  }
+}
+
   #backToTopBtn:hover { 
     background-color: #555; /* Add a dark-grey background on hover */ 
     opacity: 100%;
@@ -62,29 +82,30 @@ Style the button:
 ```js
 // assets/js/back-to-top.js
 
-function backToTopBtn () {
-  topFunction();   
-
+document.addEventListener('DOMContentLoaded', (event) => {
   let mybutton = document.getElementById("backToTopBtn");
+
+  function topFunction() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    mybutton.style.opacity = "75%";
+  }
+
+  if (mybutton) {
+    mybutton.onclick = topFunction;
+  }
+
   // 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
-  mybutton.onclick = function() {topFunction()};
-
-  function topFunction() {
-    document.body.scrollTop = 0; // For Safari
-    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-  }
-}
+});
 ```
 
 ### Add the JS source to head