buttom togo

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>

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
+}

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%;
+}