From b9d7c425a517ce7ea3e46490b0ab5e040a9557df Mon Sep 17 00:00:00 2001
From: XenGi <email@ricardo.band>
Date: Tue, 8 Feb 2022 21:07:24 +0000
Subject: [PATCH] Update index.html, main.css, main.js

---
 index.html |  5 +++++
 main.css   | 19 +++++++++++++++++++
 main.js    | 16 ++++++++++++++++
 3 files changed, 40 insertions(+)
diff --git a/index.html b/index.html
index 8d1e068..2cd2e70 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,11 @@
     <link rel="stylesheet" href="css/main.css" />
   </head>
   <body>
+    <button class="button is-primary is-medium is-responsive" onclick="gototop()" id="gototop_button" title="Go to top">
+      <span class="icon is-medium">
+        <i class="fas fa-solid fa-angles-up"></i>
+      </span>
+    </button>
 
     <nav class="navbar">
       <div class="container">
diff --git a/main.css b/main.css
index e69de29..73239d9 100644
--- a/main.css
+++ b/main.css
@@ -0,0 +1,19 @@
+#topbutton {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  background-color: red; /* Set a background color */
+  color: white; /* Text color */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  padding: 15px; /* Some padding */
+  border-radius: 10px; /* Rounded corners */
+  font-size: 18px; /* Increase font size */
+}
+
+#topbutton:hover {
+  background-color: #555; /* Add a dark-grey background on hover */
+}
diff --git a/main.js b/main.js
index e69de29..e32b218 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,16 @@
+// Show button on scroll
+window.onscroll = function() {toggle_gototop_button()};
+
+function toggle_gototop_button() {
+  gototop_button = document.getElementById("gototop_button");
+  if (document.body.scrollTop > 23 || document.documentElement.scrollTop > 23) {
+    gototop_button.style.display = "block";
+  } else {
+    gototop_button.style.display = "none";
+  }
+}
+
+function gototop() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
