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>

_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>

_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>

_sass/_themes.scss

@@ -17,6 +17,8 @@
   --global-divider-color: rgba(0, 0, 0, 0.1);
   --global-card-bg-color: #{$white-color};
   --global-highlight-color: #{$red-color-dark};
+  --global-back-to-top-bg-color: #{$black-color};
+  --global-back-to-top-text-color: #{$white-color};
 
   --global-tip-block: #42b983;
   --global-tip-block-bg: #e2f5ec;
@@ -51,6 +53,16 @@
   .repo-img-dark {
     display: none;
   }
+
+  #back-to-top {
+    color: var(--global-back-to-top-text-color);
+    background: var(--global-back-to-top-bg-color);
+    bottom: $back-to-top-bottom;
+    right: $back-to-top-right;
+    height: $back-to-top-height;
+    width: $back-to-top-width;
+    z-index: $back-to-top-z-index;
+  }
 }
 
 html[data-theme="dark"] {
@@ -67,6 +79,8 @@ html[data-theme="dark"] {
   --global-distill-app-color: #{$grey-color-light};
   --global-divider-color: #424246;
   --global-card-bg-color: #{$grey-900};
+  --global-back-to-top-bg-color: #{$white-color};
+  --global-back-to-top-text-color: #{$black-color};
 
   --global-tip-block: #42b983;
   --global-tip-block-bg: #e2f5ec;
@@ -103,6 +117,11 @@ html[data-theme-setting="dark"] {
   #light-toggle-light {
     display: none;
   }
+
+  #back-to-top {
+    color: var(--global-back-to-top-text-color);
+    background: var(--global-back-to-top-bg-color);
+  }
 }
 
 html[data-theme-setting="light"] {

_sass/_variables.scss

@@ -43,3 +43,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;