From 8e08e3f21119fddc39749bd4bebc3c2ecb3baf08 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 6 Apr 2024 14:38:31 +0800
Subject: [PATCH] Add scroll to top button

---
 _site/about/index.html               |  5 ++
 _site/assets/css/main.css            | 70 +++++++++++++++++-----------
 _site/assets/images/elements/top.svg |  9 ++++
 _site/assets/images/top.svg          |  9 ++++
 _site/assets/js/scroll.js            | 17 +++++++
 _site/home/index.html                |  5 ++
 src/_includes/layouts/main.njk       |  5 ++
 src/assets/css/main.css              | 70 +++++++++++++++++-----------
 src/assets/images/elements/top.svg   |  9 ++++
 src/assets/js/scroll.js              | 17 +++++++
 10 files changed, 164 insertions(+), 52 deletions(-)
 create mode 100644 _site/assets/images/elements/top.svg
 create mode 100644 _site/assets/images/top.svg
 create mode 100644 _site/assets/js/scroll.js
 create mode 100644 src/assets/images/elements/top.svg
 create mode 100644 src/assets/js/scroll.js
diff --git a/_site/about/index.html b/_site/about/index.html
index 16415142..caa469ba 100644
--- a/_site/about/index.html
+++ b/_site/about/index.html
@@ -35,11 +35,16 @@
         
         <script src="/assets/js/navbar.js" defer></script>
         <script src="/assets/js/events.js" defer></script>
+        <script src="/assets/js/scroll.js" defer></script>
         
 
         <title>About | Leilukin's Hub</title>
     </head>
     <body>
+        <button class="top-btn hidden" aria-label="Scroll to top">
+            <img src="/assets/images/elements/top.svg" alt="">
+        </button>
+
         <header class="main-header">
     <noscript>
         JavaScript is disabled in your browser. To get the best user experience on
diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index 45754720..d22133dc 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -7,6 +7,8 @@
     --clr-body-txt: #fceaff;
     --clr-content-bg: #3d2163;
 
+    --clr-top-btn: #FFD05A;
+
     --clr-main-heading: #ED64F5;
     --clr-sub-heading: #e8b86f;
     --clr-title-border: #d3aad5;
@@ -227,32 +229,20 @@ dd {
     grid-column-start: 2;
 }
 
-/* ELEMENT STYLES WITH CUSTOM CLASSES */
-.bold-text {
-    font-weight: 700;
+/* Scrool to Top Button */
+.top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 999;
+    border: none;
+    background-color: var(--clr-top-btn);
+    border-radius: 0.2em;
+    padding: 0.4em;
 }
 
-.center-el {
-    display: grid;
-    place-content: center;
-}
-
-.center-text {
-    text-align: center;
-}
-
-.date-style {
-    font-weight: 700;
-    color: var(--clr-dates);
-}
-
-.hidden {
-    display: none;
-}
-
-.article-list {
-    display: grid;
-    gap: 0.5em;
+.top-btn img {
+    width: 1.6rem;
 }
 
 /* HEADER COMPONENT */
@@ -325,7 +315,7 @@ dd {
 as the navigation bar gets a new position at the top of the page
 (position:fixed and top:0) */
 .sticky-nav + main {
-    padding-top: 3.75rem;
+    padding-top: 2rem;
 }
 
 /* MAIN CONTENT */
@@ -750,4 +740,32 @@ article, .content-container {
 
 .main-footer p {
     padding: 0;
-}
\ No newline at end of file
+}
+
+/* UTILITY CLASSES */
+.bold-text {
+    font-weight: 700;
+}
+
+.center-el {
+    display: grid;
+    place-content: center;
+}
+
+.center-text {
+    text-align: center;
+}
+
+.date-style {
+    font-weight: 700;
+    color: var(--clr-dates);
+}
+
+.hidden {
+    display: none;
+}
+
+.article-list {
+    display: grid;
+    gap: 0.5em;
+}
diff --git a/_site/assets/images/elements/top.svg b/_site/assets/images/elements/top.svg
new file mode 100644
index 00000000..a00097a9
--- /dev/null
+++ b/_site/assets/images/elements/top.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="windows-1252"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.189 511.189">
+  <g transform="matrix(1.25 0 0 -1.25 0 45)" style="fill:#40596B;">
+    <path d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927     c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267     c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"/>
+    <path d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929     h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83     c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"/>
+    <path d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134     c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003     c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"/>
+    <path d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474     c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858     c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022     c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/_site/assets/images/top.svg b/_site/assets/images/top.svg
new file mode 100644
index 00000000..a00097a9
--- /dev/null
+++ b/_site/assets/images/top.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="windows-1252"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.189 511.189">
+  <g transform="matrix(1.25 0 0 -1.25 0 45)" style="fill:#40596B;">
+    <path d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927     c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267     c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"/>
+    <path d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929     h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83     c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"/>
+    <path d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134     c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003     c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"/>
+    <path d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474     c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858     c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022     c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/_site/assets/js/scroll.js b/_site/assets/js/scroll.js
new file mode 100644
index 00000000..2fec53d2
--- /dev/null
+++ b/_site/assets/js/scroll.js
@@ -0,0 +1,17 @@
+const topButton = document.querySelector(".top-btn");
+
+window.onscroll = () => {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        topButton.classList.remove("hidden");
+    } else {
+        topButton.classList.add("hidden");
+    }
+}
+
+topButton.addEventListener('click', () => {
+    window.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+    });
+});
\ No newline at end of file
diff --git a/_site/home/index.html b/_site/home/index.html
index fc9a4656..74abeb79 100644
--- a/_site/home/index.html
+++ b/_site/home/index.html
@@ -35,11 +35,16 @@
         
         <script src="/assets/js/navbar.js" defer></script>
         <script src="/assets/js/events.js" defer></script>
+        <script src="/assets/js/scroll.js" defer></script>
         
 
         <title>Home | Leilukin's Hub</title>
     </head>
     <body>
+        <button class="top-btn hidden" aria-label="Scroll to top">
+            <img src="/assets/images/elements/top.svg" alt="">
+        </button>
+
         <header class="main-header">
     <noscript>
         JavaScript is disabled in your browser. To get the best user experience on
diff --git a/src/_includes/layouts/main.njk b/src/_includes/layouts/main.njk
index 1ae88b2b..f27d47ab 100644
--- a/src/_includes/layouts/main.njk
+++ b/src/_includes/layouts/main.njk
@@ -30,11 +30,16 @@
         {# JavaScript #}
         <script src="/assets/js/navbar.js" defer></script>
         <script src="/assets/js/events.js" defer></script>
+        <script src="/assets/js/scroll.js" defer></script>
         {% if toc %} <script src="/assets/js/toc.js" defer></script> {% endif %}
 
         <title>{{ title }} | Leilukin's Hub</title>
     </head>
     <body>
+        <button class="top-btn hidden" aria-label="Scroll to top">
+            <img src="/assets/images/elements/top.svg" alt="">
+        </button>
+
         {% include "components/header.njk" %}
         {% include "components/navbar.njk" %}
         <main>
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 45754720..d22133dc 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -7,6 +7,8 @@
     --clr-body-txt: #fceaff;
     --clr-content-bg: #3d2163;
 
+    --clr-top-btn: #FFD05A;
+
     --clr-main-heading: #ED64F5;
     --clr-sub-heading: #e8b86f;
     --clr-title-border: #d3aad5;
@@ -227,32 +229,20 @@ dd {
     grid-column-start: 2;
 }
 
-/* ELEMENT STYLES WITH CUSTOM CLASSES */
-.bold-text {
-    font-weight: 700;
+/* Scrool to Top Button */
+.top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 999;
+    border: none;
+    background-color: var(--clr-top-btn);
+    border-radius: 0.2em;
+    padding: 0.4em;
 }
 
-.center-el {
-    display: grid;
-    place-content: center;
-}
-
-.center-text {
-    text-align: center;
-}
-
-.date-style {
-    font-weight: 700;
-    color: var(--clr-dates);
-}
-
-.hidden {
-    display: none;
-}
-
-.article-list {
-    display: grid;
-    gap: 0.5em;
+.top-btn img {
+    width: 1.6rem;
 }
 
 /* HEADER COMPONENT */
@@ -325,7 +315,7 @@ dd {
 as the navigation bar gets a new position at the top of the page
 (position:fixed and top:0) */
 .sticky-nav + main {
-    padding-top: 3.75rem;
+    padding-top: 2rem;
 }
 
 /* MAIN CONTENT */
@@ -750,4 +740,32 @@ article, .content-container {
 
 .main-footer p {
     padding: 0;
-}
\ No newline at end of file
+}
+
+/* UTILITY CLASSES */
+.bold-text {
+    font-weight: 700;
+}
+
+.center-el {
+    display: grid;
+    place-content: center;
+}
+
+.center-text {
+    text-align: center;
+}
+
+.date-style {
+    font-weight: 700;
+    color: var(--clr-dates);
+}
+
+.hidden {
+    display: none;
+}
+
+.article-list {
+    display: grid;
+    gap: 0.5em;
+}
diff --git a/src/assets/images/elements/top.svg b/src/assets/images/elements/top.svg
new file mode 100644
index 00000000..a00097a9
--- /dev/null
+++ b/src/assets/images/elements/top.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="windows-1252"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.189 511.189">
+  <g transform="matrix(1.25 0 0 -1.25 0 45)" style="fill:#40596B;">
+    <path d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927     c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267     c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"/>
+    <path d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929     h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83     c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"/>
+    <path d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134     c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003     c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"/>
+    <path d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474     c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858     c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022     c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/js/scroll.js b/src/assets/js/scroll.js
new file mode 100644
index 00000000..2fec53d2
--- /dev/null
+++ b/src/assets/js/scroll.js
@@ -0,0 +1,17 @@
+const topButton = document.querySelector(".top-btn");
+
+window.onscroll = () => {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        topButton.classList.remove("hidden");
+    } else {
+        topButton.classList.add("hidden");
+    }
+}
+
+topButton.addEventListener('click', () => {
+    window.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+    });
+});
\ No newline at end of file
