Updating Github Pages with scrolling to top button

TheWongLife · May 30, 2024 · 6b06b79 · 6b06b79
1 parent 23227c5
commit 6b06b79
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 8 deletions.
diff --git a/404.html b/404.html
@@ -31,6 +31,14 @@
                 text-align: center;
             }
         </style>
+        <style>
+            #btn-back-to-top {
+              position: fixed;
+              bottom: 20px;
+              right: 20px;
+              display: none;
+            }
+        </style>
     </head>
 
     <body>
@@ -74,13 +82,21 @@
         <main>
             <h4 class="header404">404</h4>
             <div class="content-404">
-                The page you're looking for couldn't be found.
+                The page you're looking for couldn't be found <i class="fa-solid fa-xmark fa-sm"></i>.
             </div>
             <p>
-                Please navigate back to <a href="https://thewonglife.is-a.dev">my home page</a>.
+                Please navigate back to <a href="https://thewonglife.is-a.dev">my home <i class="fa-solid fa-house fa-sm"></i> page</a>.
             </p>
         </main>
 
+        <button
+                type="button"
+                class="btn btn-danger btn-floating btn-lg"
+                id="btn-back-to-top"
+                >
+            <i class="fa-solid fa-chevron-up fa-sm"></i>
+        </button>
+
         <footer class="text-center">
             <div class="container pt-4">
               <section class="mb-4">
@@ -205,7 +221,8 @@ <h4 class="header404">404</h4>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-        <script src="script.js"></script>
+        <script src="js/script.js"></script>
+        <script src="js/scroll.js"></script>
         <script>
             import { Ripple, initMDB } from "mdb-ui-kit";
             initMDB({ Ripple });

diff --git a/html/about.html b/html/about.html
@@ -15,6 +15,14 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            #btn-back-to-top {
+              position: fixed;
+              bottom: 20px;
+              right: 20px;
+              display: none;
+            }
+        </style>
     </head>
 
     <body>
@@ -106,6 +114,14 @@ <h3 align="center">Senior @ University of Illinois Urbana-Champaign (UIUC) major
 
 <p><img align="center" src="https://github-readme-streak-stats.herokuapp.com/?user=thewonglife&" alt="thewonglife" /></p>
 
+<button
+        type="button"
+        class="btn btn-danger btn-floating btn-lg"
+        id="btn-back-to-top"
+        >
+    <i class="fa-solid fa-chevron-up fa-sm"></i>
+</button>
+
 <footer class="text-center">
     <div class="container pt-4">
       <section class="mb-4">
@@ -230,7 +246,8 @@ <h3 align="center">Senior @ University of Illinois Urbana-Champaign (UIUC) major
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-        <script src="/script.js"></script>
+        <script src="../js/script.js"></script>
+        <script src="../js/scroll.js"></script>
         <script>
             import { Ripple, initMDB } from "mdb-ui-kit";
             initMDB({ Ripple });

diff --git a/html/contact.html b/html/contact.html
@@ -15,6 +15,14 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            #btn-back-to-top {
+              position: fixed;
+              bottom: 20px;
+              right: 20px;
+              display: none;
+            }
+        </style>
     </head>
 
     <body>
@@ -109,6 +117,14 @@ <h1 class="text-center mt-5">Let's start a conversation <i class="fa-solid fa-co
         <input type="hidden" name="_template" value="table">
         </form>
 
+        <button
+                type="button"
+                class="btn btn-danger btn-floating btn-lg"
+                id="btn-back-to-top"
+                >
+            <i class="fa-solid fa-chevron-up fa-sm"></i>
+        </button>
+
         <footer class="text-center">
             <div class="container pt-4">
               <section class="mb-4">
@@ -233,7 +249,8 @@ <h1 class="text-center mt-5">Let's start a conversation <i class="fa-solid fa-co
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-        <script src="/script.js"></script>
+        <script src="../js/script.js"></script>
+        <script src="../js/scroll.js"></script>
         <script>
             import { Ripple, initMDB } from "mdb-ui-kit";
             initMDB({ Ripple });

diff --git a/html/resume.html b/html/resume.html
@@ -15,6 +15,14 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            #btn-back-to-top {
+              position: fixed;
+              bottom: 20px;
+              right: 20px;
+              display: none;
+            }
+      </style>
     </head>
 
     <body>
@@ -61,6 +69,14 @@ <h1 class="text-center mt-5">Check out my resume <i class="fa-solid fa-file fa-s
         <iframe src="/Nicholas_Wong_Resume.pdf" width="1000" height="1000" title="Nicholas Wong's Resume"></iframe>
         </div>
 
+        <button
+                type="button"
+                class="btn btn-danger btn-floating btn-lg"
+                id="btn-back-to-top"
+                >
+            <i class="fa-solid fa-chevron-up fa-sm"></i>
+        </button>
+
         <footer class="text-center">
             <div class="container pt-4">
               <section class="mb-4">
@@ -185,7 +201,8 @@ <h1 class="text-center mt-5">Check out my resume <i class="fa-solid fa-file fa-s
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-        <script src="/script.js"></script>
+        <script src="../js/script.js"></script>
+        <script src="../js/scroll.js"></script>
         <script>
             import { Ripple, initMDB } from "mdb-ui-kit";
             initMDB({ Ripple });

diff --git a/html/thanks.html b/html/thanks.html
@@ -15,6 +15,14 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            #btn-back-to-top {
+              position: fixed;
+              bottom: 20px;
+              right: 20px;
+              display: none;
+            }
+        </style>
     </head>
 
     <body>
@@ -67,6 +75,14 @@ <h1 class="text-center mt-5">Thank You</h1>
             </div>
         </div>
 
+        <button
+                type="button"
+                class="btn btn-danger btn-floating btn-lg"
+                id="btn-back-to-top"
+                >
+            <i class="fa-solid fa-chevron-up fa-sm"></i>
+        </button>
+
         <footer class="text-center">
             <div class="container pt-4">
               <section class="mb-4">
@@ -191,7 +207,8 @@ <h1 class="text-center mt-5">Thank You</h1>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-        <script src="/script.js"></script>
+        <script src="../js/script.js"></script>
+        <script src="../js/scroll.js"></script>
         <script>
             import { Ripple, initMDB } from "mdb-ui-kit";
             initMDB({ Ripple });

diff --git a/index.html b/index.html
@@ -15,6 +15,14 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            #btn-back-to-top {
+              position: fixed;
+              bottom: 20px;
+              right: 20px;
+              display: none;
+            }
+        </style>
     </head>
 
     <body>
@@ -175,6 +183,14 @@ <h4>Visual Studio Code</h4>
             </div>
         </div>
 
+        <button
+                type="button"
+                class="btn btn-danger btn-floating btn-lg"
+                id="btn-back-to-top"
+                >
+            <i class="fa-solid fa-chevron-up fa-sm"></i>
+        </button>
+
         <footer class="text-center">
             <div class="container pt-4">
               <section class="mb-4">
@@ -299,7 +315,8 @@ <h4>Visual Studio Code</h4>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
-        <script src="script.js"></script>
+        <script src="js/script.js"></script>
+        <script src="js/scroll.js"></script>
         <script>
             import { Ripple, initMDB } from "mdb-ui-kit";
             initMDB({ Ripple });

diff --git a/script.js → js/script.js b/script.js → js/script.js
diff --git a/js/scroll.js b/js/scroll.js
@@ -0,0 +1,23 @@
+let mybutton = document.getElementById("btn-back-to-top");
+
+window.onscroll = function () {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+mybutton.addEventListener("click", backToTop);
+
+function backToTop() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}