From 9af3d20fa7c3e2a413dd063d6011cd0464c4e730 Mon Sep 17 00:00:00 2001
From: kankys <lukas.kanka@lukan.cz>
Date: Thu, 28 Mar 2024 21:16:26 +0100
Subject: [PATCH] buttom togo

---
 index.html |  4 +++-
 script.js  | 21 +++++++++++++++++++++
 style.css  | 13 +++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d35df1f..4896936 100644
--- a/index.html
+++ b/index.html
@@ -419,8 +419,9 @@
           👉 <a href="https://i3wm.org/" target="_blank">i3 window manager</a>
         </p>
 	</section>
+	<!--<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">Nahoru</button>-->
       </section>
-
+<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">Nahoru</button>
       <footer>
         Copyright &copy;
         <a href="https://git.archoslinux.cz/kankys" target="_blank"
@@ -429,6 +430,7 @@
         2024
       </footer>
     </section>
+    
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index eb6d4fb..2259238 100644
--- a/script.js
+++ b/script.js
@@ -27,6 +27,7 @@ const p = document.querySelector("p");
 const solid = document.querySelector(".fa-solid");
 const solid1 = document.querySelector(".menu-icon");
 const footer = document.querySelector("footer");
+const gotop = document.getElementById("scrollToTopBtn");
 
 let isDraculaMode = false;
 
@@ -47,6 +48,7 @@ function setDraculaStyles() {
   solid.style.color = "#f76b00";
   solid1.style.backgroundColor = "#2a232b";
   footer.style.backgroundColor = "#2a232b";
+	gotop.style.backgroundColor = "#18f700";
 }
 
 // Funkce pro nastavení stylů pro Light mód
@@ -120,3 +122,22 @@ image3.addEventListener("mouseleave", () => {
     image3.style.transform = "scale(1)"
 
 })
+
+
+// Tlačítko go to top
+// Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    document.getElementById("scrollToTopBtn").style.display = "block";
+  } else {
+    document.getElementById("scrollToTopBtn").style.display = "none";
+  }
+}
+
+// Posunout nahoru, když uživatel klikne na tlačítko
+function scrollToTop() {
+  document.body.scrollTop = 0; // Pro Safari
+  document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
+}
diff --git a/style.css b/style.css
index 499ba71..4c54ee0 100644
--- a/style.css
+++ b/style.css
@@ -198,3 +198,16 @@ footer {
 footer a {
   text-decoration: none;
 }
+
+#scrollToTopBtn {
+  display: none; /* Tlačítko je na začátku skryté */
+  position: fixed; /* Upevnění tlačítka na pravém dolním rohu */
+  bottom: 20px;
+  right: 20px;
+  z-index: 99; /* Ujistěte se, že tlačítko bude přes obsah */
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 15px;
+  border-radius: 50%;
+}