Homepage – die besten Beiträge

Wie kann der Scroll-Button ausgeblendet werden bzw. eingeblendet?

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
  });
});
Homepage, App, Programm, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code

Eigene Webseite - womit erstellen?

Hi,

ich möchte eine Webseite erstellen, inklusive eigener Domain. Nichts Großes oder sonderlich aufwändig. Auf ihr soll hauptsächlich Folgendes zu finden sein:

  • ein Kalender, in dem sämtliche Events für eine bestimmte Personengruppe in meiner Heimatstadt zu finden sind
  • eine Liste mit Links zu diversen Orten und Anlaufstellen. Alles jeweils von mir manuell eingetragen
  • die Möglichkeit, Kontakt aufzunehmen, falls ich eine Veranstaltung übersehen habe.

Keine online Buchung oder Ticketverkäufe, es dient nur der Info.

Jetzt habe ich mir schon diverse Hostinganbieter wie Wix, GoDaddy, Jimdo, IONOS usw. angesehen, allerdings weiß ich nicht, wer für meine Idee richtig ist. Jetzt bin ich zwar willens, Geld für die Domain, das Hosting und einen Baukasten zu bezahlen, aber da Funktionen und Umfang nur beschränkt sein sollen, möchte ich nicht ein riesiges Paket kaufen und Geld für Baukästen und Templates bezahlen, deren Funktion ich nicht nutzen werde.

Welcher Anbieter ist denn für so ein kleines Projekt richtig? Welche Erfahrungen habt ihr gemacht? Und wie kann man die Kosten möglichst gering halten, bei ansprechendem Design und ausreichender Funktionalität? Gibt es die Möglichkeit, kostenlose Templates eines Kalenders zu implementieren, ohne dass ein ansprechendes Design verlorengeht? Usw. usw.

Die Domain sollte aussagekräftig sein, also ganz normal xyz.de, und nicht xyz.onlinehosting-forfree.net oder sowas.

Vielen Dank euch im Voraus

Homepage, Webseite, Homepage baukasten, homepage erstellen, webseite erstellung, Webseitenentwicklung

Meistgelesene Beiträge zum Thema Homepage