feniweb

Top Button bei scrollen einblenden

—

in , , , ,

Top Button bei scrollen einblenden

Hier ist ein einfaches Skript, das einen „Top-Button“ erstellt, der erscheint, sobald der Benutzer 100px scrollt. Beim Klick auf diesen Button wird der Benutzer zurück zum Seitenanfang gebracht.

HTML und CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll to Top Button</title>
    <style>
        /* Grundlayout */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 2000px; /* Beispiel-Inhaltshöhe */
        }

        /* Top-Button-Styling */
        .top-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none; /* Standardmäßig unsichtbar */
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: opacity 0.3s ease;
        }

        .top-button:hover {
            background-color: #555;
        }

        .top-button.show {
            display: flex; /* Sichtbar machen */
        }
    </style>
</head>
<body>
    <!-- Top-Button -->
    <button class="top-button" id="topButton">↑</button>

    <script>
        // Button-Element referenzieren
        const topButton = document.getElementById("topButton");

        // Überwache das Scroll-Ereignis
        window.addEventListener("scroll", () => {
            if (window.scrollY > 100) {
                // Button sichtbar machen
                topButton.classList.add("show");
            } else {
                // Button verstecken
                topButton.classList.remove("show");
            }
        });

        // Klick-Ereignis für den Button
        topButton.addEventListener("click", () => {
            // Sanftes Scrollen nach oben
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        });
    </script>
</body>
</html>

Funktionalität:

  1. Scroll-Ereignis:
    • Über window.addEventListener("scroll") wird überprüft, ob der Benutzer mehr als 100px gescrollt hat. Wenn ja, wird die Klasse show hinzugefügt, die den Button sichtbar macht.
  2. Top-Button-Ereignis:
    • Beim Klick auf den Button wird die Seite mithilfe von window.scrollTo() sanft nach oben gescrollt (behavior: "smooth").
  3. CSS:
    • Der Button wird zunächst mit display: none ausgeblendet und durch die Klasse .show sichtbar gemacht.
    • Er hat eine feste Position am unteren rechten Bildschirmrand.
  4. Responsive Design:
    • Der Button bleibt immer unten rechts, unabhängig von der Bildschirmgröße.

Ergebnis:

Du kannst das Styling, die Position und den Auslöser (z. B. 100px) leicht anpassen.

Sobald der Benutzer 100px scrollt, erscheint ein schwebender Button in der unteren rechten Ecke.

Ein Klick auf den Button scrollt die Seite sanft zurück zum Anfang.