Merge pull request #153 from maysam-gholampour/master

Add back-to-top button functionality and text justification

Author: ChrisRackauckas

_assets/scripts/js/back_to_top.js

@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const btn = document.getElementById("backToTop");
+
+    window.onscroll = function () {
+        const isVisible = btn.style.display === "block";
+
+        if (
+            document.body.scrollTop > 300 ||
+            document.documentElement.scrollTop > 300
+        ) {
+            if (!isVisible) {
+                btn.style.display = "block";
+                btn.classList.add("pulse-once");
+                setTimeout(() => btn.classList.remove("pulse-once"), 600);
+            }
+        } else {
+            btn.style.display = "none";
+        }
+    };
+
+    btn.addEventListener("click", function () {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+});

_css/adjust.css

@@ -4,7 +4,8 @@
   font-size: var(--small);
 }
 
-.franklin-content { font-size: 1.4rem; }
+.franklin-content { font-size: 1.4rem; 
+  text-align: justify;}
 
 #main {
   float: left;

_css/franklin.css

@@ -59,16 +59,6 @@ html {
     FOOT / COPYRIGHT
 ================================================================== */
 
-.back-to-top {
-  float: right;
-  font-size: xx-large;
-  padding-bottom: 3em;
-}
-
-.back-to-top i {
-  color: var(--color-purple)
-}
-
 .franklin-content .page-foot a {
   text-decoration: none;
 }

_css/tufte.css

@@ -439,3 +439,52 @@ label.margin-toggle:not(.sidenote-number) { display: none; }
   border-top-style: ridge;
   border-width: thin;
 }
+
+
+
+
+
+
+#backToTop {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999;
+  display: none;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  font-size: xx-large;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#backToTop i {
+  color: var(--color-purple)
+}
+
+/* Hover effect: gently lift */
+#backToTop:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* Gentle pulse when shown */
+#backToTop.pulse-once {
+  animation: pulse-once 0.6s ease;
+}
+
+@keyframes pulse-once {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  60% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}

_layout/back_to_top.html

@@ -0,0 +1,6 @@
+<!-- Back to top button -->
+<button id="backToTop" class="shadow" title="Back to top">
+  <i class="fa fa-chevron-circle-up"></i>
+</button>
+
+<script src="/assets/scripts/js/back_to_top.js"></script>

_layout/foot.html

@@ -1,4 +1,5 @@
 <!-- CONTENT ENDS HERE -->
+        {{insert back_to_top.html}}
         </div> <!-- end of id=main -->
     </div> <!-- end of id=layout -->
     {{ if hasmath }}

_layout/page_foot.html

@@ -1,6 +1,4 @@
-<div class="back-to-top">
-  <span><a href="#" title="Back to Top"><i class="fa fa-chevron-circle-up"></i></a></span>
-</div>
+
 {{ if weave }}
 {{ else }}
 <div class="page-foot">