From 918567f348cf6740e0ac92f62ce15a982c87c4a9 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Sun, 30 Aug 2020 03:55:23 +0100
Subject: [PATCH] added scroll to top buttons

---
 public/css/style.scss | 20 ++++++++++++++++++++
 public/index.html     |  6 ++++++
 public/js/script.js   |  4 ++++
 3 files changed, 30 insertions(+)

diff --git a/public/css/style.scss b/public/css/style.scss
index eeb544507..2dfc9210a 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -2438,6 +2438,26 @@ key {
   }
 }
 
+.scrollToTopButton {
+  bottom: 2rem;
+  right: 2rem;
+  position: fixed;
+  font-size: 2rem;
+  width: 4rem;
+  height: 4rem;
+  text-align: center;
+  line-height: 4rem;
+  background: var(--bg-color);
+  border-radius: 99rem;
+  z-index: 99;
+  cursor: pointer;
+  color: var(--sub-color);
+  transition: 0.25s;
+  &:hover {
+    color: var(--main-color);
+  }
+}
+
 @media only screen and (max-width: 1000px) {
   #centerContent {
     .pageSettings .section.themes .buttons,
diff --git a/public/index.html b/public/index.html
index cf1733a77..2015c7176 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1343,6 +1343,9 @@
           </div>
         </div>
         <div class="page pageSettings hidden">
+          <div class="scrollToTopButton">
+            <i class="fas fa-angle-double-up"></i>
+          </div>
           <div class="tip">
             tip: You can also change all these settings quickly using the
             command line (
@@ -2272,6 +2275,9 @@
         </div>
 
         <div class="page pageAccount hidden">
+          <div class="scrollToTopButton">
+            <i class="fas fa-angle-double-up"></i>
+          </div>
           <div class="preloader">
             <i class="fas fa-fw fa-spin fa-circle-notch"></i>
           </div>
diff --git a/public/js/script.js b/public/js/script.js
index e54943dca..283965309 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -4017,6 +4017,10 @@ $(document).ready(() => {
     });
 });
 
+$(".scrollToTopButton").click((event) => {
+  window.scrollTo(0, 0);
+});
+
 let ctx = $("#wpmChart");
 let wpmOverTimeChart = new Chart(ctx, {
   type: "line",