JavaScript – die besten Beiträge

Verwandte Themen
haveyou
15.01.2025, 12:28

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
1 Antwort
AnonymeFrage314
19.12.2024, 00:33

Programmiermentor, Aspergerautismus?

Guten Tag,

Ich bin 24 Jahre alt und habe einen Asperger-Autismus, wegen welchem es mir sehr schwer fällt, einen normalen Job zu behalten, da mich die meisten als Arrogant, Komisch, o.Ä. empfinden.

Daher will ich mir ein Fundament aufbauen im Bereich Programmieren, damit ich so eventuell dann irgendwann, in einem für mich erträglichen Arbeitsumfeld, arbeiten kann.

Von der Intelligenz her reicht es vollkommen, jedoch habe ich ein kleines Defizit; Wenn ich ein ganzes Thema neu anfange, habe ich viele Fragen, welche ich meist, von einem Mentor, beantwortet bekommen muss, sonst überstrapaziert es mich und ich krieg keinen klaren Kopf mehr. Sobald ich ein solides Fundament aufgebaut habe, kann ich selbstständig darauf aufbauen. Jedoch besitze ich noch kein derartiges Fundament. Lediglich HTML kann ich sagen, dass mein Fundament relativ gut ist. CSS jedoch merke ich, dass mir dieser Mentor fehlt.

Ich würde einen engagieren und bezahlen, jedoch fehlen mir die finanziellen Mitteln, weswegen das keine Option ist…

Lange Rede, kurzer Sinn: Kennt Ihr jemanden, der eventuell bereit wäre, ein solcher Mentor zu sein?

Ich könnte mich anderweitig revanchieren, indem ich Aufträge für ihn erfülle, sobald ich dazu fähig bin.

Ich wäre froh über eine Antwort und bitte nur Antworten, wenn Ihr eine Lösung habt. Ich will kein Mitleid oder sonstiges, sondern einfach eine Lösung finden.

vielen lieben Dank und ich freue mich auf eine Rückmeldung!

Lernen, HTML, IT, programmieren, CSS, JavaScript, Asperger-Syndrom, Autismus, mentor, Umschulung, Asperger-Autimus
3 Antworten

Meistgelesene Beiträge zum Thema JavaScript

Mehr meistgelesene Fragen zu JavaScript