Warum funktioniert es nicht, der Button bleibt von Anfang bis Ende der Seite eingeblendet.
Ich möchte eine JS -Funktion schreiben, die diesen Button erst einblendet, wenn der Nutzer ein Stück weit herunter gescrollt hat. Ebenso soll der Button versteckt werden, wenn der Nutzer wieder nach oben gescrollt hat.
Mein bisheriger Code:
HTML:
<a href="#" id="topButton">Nach oben</a>
CSS:
#topButton {
position: fixed;
bottom: 20px; /* Abstand vom unteren Rand */
right: 30px; /* Abstand vom rechten Rand */
background-color: #007BFF; /* Blau */
color: white; /* Weißer Text */
padding: 10px 15px; /* Innenabstand */
border: none; /* Kein Rand */
border-radius: 5px; /* Abgerundete Ecken */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
text-decoration: none; /* Keine Unterstreichung */
font-size: 14px; /* Schriftgröße */
cursor: pointer; /* Zeiger-Hand-Symbol */
transition: background-color 0.3s ease, transform 0.2s ease; /* Animation */
}
#topButton:hover {
background-color: #0056b3; /* Dunkleres Blau beim Hover */
transform: translateY(-2px); /* Leichtes Anheben beim Hover */
}
#topButton:active {
transform: translateY(0); /* Zurücksetzen bei Klick */
}
JavaScript:
// Element auswählen
let topButton = document.getElementById("topButton");
// Scroll-Event-Listener hinzufügen
window.addEventListener("scroll", function() {
// Zeigt den Button an, wenn mehr als 50px gescrollt wurde
if (window.scrollY > 50) {
topButton.style.display = "block"; // Button wird sichtbar
} else {
topButton.style.display = "none"; // Button wird versteckt
}
});
// Klick-Event für den Button
topButton.addEventListener("click", function(event) {
event.preventDefault(); // Standard-Aktion verhindern
window.scrollTo({
top: 0, // Scrollt nach oben
behavior: "smooth" // Sanftes Scrollen
});
});
