feat: add back-to-top button (alshedivat#2427)

slove alshedivat#2425 Demo: <img width="1643" alt="image" src="https://github.com/alshedivat/al-folio/assets/119845914/ea73b84b-1d09-4af8-b1ba-6090595f5ab7"> --------- Signed-off-by: simonwei97 <simonwei977@gmail.com> Signed-off-by: Simonwei97 <119845914+simonwei97@users.noreply.github.com>
karapostK · Jul 4, 2024 · c5c4a55 · c5c4a55
1 parent 94111f5
commit c5c4a55
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/_includes/scripts/back_to_top.liquid b/_includes/scripts/back_to_top.liquid
@@ -0,0 +1,4 @@
+<script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
+<script>
+  addBackToTop();
+</script>
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
@@ -71,5 +71,6 @@
     {% include scripts/wechatModal.liquid %}
     {% include scripts/imageLayouts.liquid %}
     {% include scripts/jekyll_tabs.liquid %}
+    {% include scripts/back_to_top.liquid %}
   </body>
 </html>
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -40,3 +40,11 @@ $fa-font-path: "../webfonts";
 
 // Tabler icons location
 $ti-font-path: "../fonts";
+
+// Back To Top button config
+$back-to-top-z-index: 10;
+$back-to-top-bottom: 50px;
+$back-to-top-right: 50px;
+$back-to-top-diameter: 56px;
+$back-to-top-height: $back-to-top-diameter;
+$back-to-top-width: $back-to-top-diameter;
diff --git a/assets/js/vanilla-back-to-top.min.js b/assets/js/vanilla-back-to-top.min.js