Scroll To Top

Entdecken Sie mehr! Nutzen Sie unseren Scroll-Up-Button, um schnell zum Anfang der Seite zurückzukehren.

Grundgerüst

Als erstes erstellen wir ein HTML Grundgerüst, wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Ihr Hauptinhalt hier -->

  <div id="scroll-up">&#9650;</div>

  <script src="script.js"></script>

</body>
</html>

dann erstellen wir eine einfache css Datei in der wir ein bisschen unseren button gestallten.

body {
  margin: 0;
}

main {
  max-width: 1024px;
  margin: auto;
}

main div {
  margin-bottom: 1rem;
}

#scroll-up {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  cursor: pointer;
  height: 48px;
  width: 48px;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
    0 4px 8px 3px rgba(60, 64, 67, 0.15);
  border-radius: 50%;
}

#scroll-up.show-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}

Dieser CSS-Code definiert Stilregeln für verschiedene Teile einer Webseite. Hier ist eine Erklärung für jeden Abschnitt:

1. **`body` Regel:**
- `margin: 0;`: Setzt den Außenabstand des `body`-Elements auf null, um sicherzustellen, dass es keinen zusätzlichen Abstand am Rand der Seite gibt.

2. **`main` Regel:**
- `max-width: 1024px;`: Begrenzt die maximale Breite des `main`-Elements auf 1024 Pixel.
- `margin: auto;`: Zentriert das `main`-Element horizontal auf der Seite, indem der automatische Außenabstand verwendet wird.

3. **`main div` Regel:**
- `margin-bottom: 1rem;`: Fügt einen unteren Außenabstand von 1 Rem (eine Einheit basierend auf der Schriftgröße) zu allen `<div>`-Elementen innerhalb des `main`-Elements hinzu.

4. **`#scroll-up` Regel:**
- `position: fixed;`: Setzt die Position des Elements auf fixiert, sodass es beim Scrollen der Seite an einer festen Position bleibt.
- `bottom: 20px; right: 20px;`: Positioniert das Element 20 Pixel vom unteren und rechten Rand des Bildschirms entfernt.
- `display: none;`: Verbirgt das Element standardmäßig.
- `cursor: pointer;`: Ändert den Mauszeiger, wenn er über das Element bewegt wird, um anzuzeigen, dass es anklickbar ist.
- `height: 48px; width: 48px;`: Setzt die Höhe und Breite des Elements auf 48 Pixel.
- `box-shadow`: Fügt einen Schatten zum Element hinzu, um es vor dem Hintergrund hervorzuheben.
- `border-radius: 50%;`: Verleiht dem Element eine runde Form, da der Wert 50% einen Kreis darstellt.

5. **`#scroll-up.show-scroll` Regel:**
- `display: flex; justify-content: center; align-items: center;`: Zeigt das Element an und zentriert den Inhalt horizontal und vertikal, wenn die Klasse `show-scroll` dem Element hinzugefügt wird.

Kleines Script

Jetzt noch ein kleines script:

var scrollUp = function () {
  const scrollUp = document.getElementById("scroll-up");
  scrollUp.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });
  if (window.scrollY >= 300) scrollUp.classList.add("show-scroll");
  else scrollUp.classList.remove("show-scroll");
};

window.addEventListener("scroll", function () {
  scrollUp();
});

scrollUp();

Dieses JavaScript-Script implementiert eine Scroll-Up-Funktion auf einer Webseite. Hier ist eine Erklärung für jeden Teil des Scripts:

1. **`var scrollUp = function () { ... }`:**
- Es definiert eine Funktion namens `scrollUp`.

2. **`const scrollUp = document.getElementById("scroll-up");`:**
- Holt sich das DOM-Element mit der ID "scroll-up" und weist es der Variable `scrollUp` zu.

3. **`scrollUp.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });`:**
- Weist der `onclick`-Eigenschaft des `scrollUp`-Elements eine Funktion zu. Diese Funktion wird aufgerufen, wenn das Element angeklickt wird.
- Die Funktion setzt die Scrollposition des Fensters auf den oberen Rand der Seite (`top: 0`) und verwendet dabei eine sanfte Scrollanimation (`behavior: "smooth"`).

4. **`if (window.scrollY >= 300) scrollUp.classList.add("show-scroll");`:**
- Überprüft, ob die aktuelle Scrollposition (`window.scrollY`) größer oder gleich 300 Pixel ist.
- Wenn ja, wird der Klasse "show-scroll" die Klasse `show-scroll` hinzugefügt, um das Scroll-Up-Element anzuzeigen.

5. **`else scrollUp.classList.remove("show-scroll");`:**
- Wenn die Scrollposition kleiner als 300 Pixel ist, wird die Klasse `show-scroll` entfernt, um das Scroll-Up-Element zu verbergen.

6. **`window.addEventListener("scroll", function () { scrollUp(); });`:**
- Fügt einen Event-Listener hinzu, der auf das Scrollen der Seite reagiert.
- Bei jedem Scrollereignis wird die Funktion `scrollUp` aufgerufen, um zu überprüfen, ob das Scroll-Up-Element angezeigt oder ausgeblendet werden soll.

7. **`scrollUp();`:**
- Ruft die `scrollUp`-Funktion einmalig auf, um den initialen Status des Scroll-Up-Elements basierend auf der aktuellen Scrollposition festzulegen.

Zusammenfassend ermöglicht dieses Script die Anzeige eines Scroll-Up-Elements, wenn der Benutzer über 300 Pixel nach unten scrollt, und erlaubt es dem Benutzer, durch Klicken auf dieses Element sanft zur Oberseite der Seite zu scrollen.

Meld dich an und schreibe ein Kommentar