buttom togo

This commit is contained in:
kankys 2024-03-28 21:16:26 +01:00
parent a03e1f4ac8
commit 9af3d20fa7
3 changed files with 37 additions and 1 deletions

View File

@ -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>

View File

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

View File

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