add button

This commit is contained in:
andreyflat 2025-07-20 23:05:18 +08:00
parent 22bdb42dc1
commit 8a237b0c9e
3 changed files with 32 additions and 30 deletions

View file

@ -139,26 +139,23 @@
} }
#scrollToTopBtn { #scrollToTopBtn {
position: fixed; position: fixed;
bottom: 20px; bottom: 15px;
right: 20px; right: 15px;
z-index: 999; z-index: 9999;
background-color: rgba(255, 255, 255, 0.1); background-color: #010;
border: 1px solid #888; color: #000;
color: #eee; font-size: 1.25em;
font-size: 1.5em; padding: 0.4em 0.8em;
padding: 0.2em 0.6em; border: none;
border-radius: 0.4em; border-radius: 0.5em;
cursor: pointer; cursor: pointer;
transition: opacity 0.3s ease; opacity: 1 !important;
opacity: 0; pointer-events: auto !important;
pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
} transition: opacity 0.3s ease;
}
#scrollToTopBtn.show {
opacity: 1;
pointer-events: auto;
}
</style> </style>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
@ -395,16 +392,6 @@ const videoObserver = new IntersectionObserver((entries, observer) => {
h1.style.letterSpacing = ""; h1.style.letterSpacing = "";
h1.style.transition = "letter-spacing 1s ease"; h1.style.transition = "letter-spacing 1s ease";
}); });
window.addEventListener("scroll", () => {
const maxSpacing = 1.2;
const maxScroll = 600;
const scrollY = window.scrollY;
const spacing = Math.min(scrollY / maxScroll * maxSpacing, maxSpacing);
if (!h1.matches(':hover')) {
h1.style.letterSpacing = spacing + "em";
}
});
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
const baseMaxSpacing = 0.0012; // коэффициент const baseMaxSpacing = 0.0012; // коэффициент
@ -437,7 +424,22 @@ window.addEventListener("scroll", () => {
</script> </script>
<button id="scrollToTopBtn" title="Back to top">&#8679;</button> <button id="scrollToTopBtn" title="Back to top">&#8679;</button>
<script>
window.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("scrollToTopBtn");
if (!btn) return;
btn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
});
</script>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.