Programmieren – 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

Frage zu c# bzw. #script?

Kennt sich jemand mit #script aus?

Ich habe folgendes Skript:

 "Script/DeviceTemplate": {
        "Content": "{{var assignments = []}}
{{var nodeId = ServiceTask.DeviceInstallationServiceTask.Details.NodeId}}
{{#each groupName in Typicals.DeviceTypes.xxx.DeviceTypicals[ServiceTask.DeviceInstallationServiceTask.Details.Typical.Name].SignalGroups}}
{{var index = 0}}
{{#each signal in Typicals.DeviceTypes.xxx.SignalGroups[groupName].SignalList}}
{{var baseComponent = ServiceTask.DeviceInstallationServiceTask.Details.Typical.SignalAssignments[groupName].BaseComponent}}
{{var _ = assignments.push({
    "assignmentIndex": index,
	"deviceId": "" + nodeId,
    "sparkplugName": baseComponent + signal.MetricBaseName
})}}
{{index = index + 1}}
{{/each}}
{{/each}}
{{ {
  "system": {
    "deviceName": nodeId
  },
  "apps": [
    {
      "appName": "SPARKPLUG",
      "appId": 12345,
      "settings": {
                "clientId": nodeId,
                "keepAliveInterval": 120,
                "publishInterval": 120,
                "startupDelay": 50
      },	 
      "sparkplugSettings": {
            "mqttTopic": "spBv1.0",
            "sparkplugTopic": "NTN/{MessageType}/" + nodeId
      },
      "assignments": assignments
    }
  ]
} |> json}}"
      }

Dieses hat zwei Schleifen, in der inneren Schleife soll die Variable index um 1 erhöht werden. Alles funktioniert, nur bekomme ich in der Ausgabe für jeden Aufruf von

index = index + 1

ebenfalls eine Ausgabe:

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
   {"system":{"deviceName......

Wie kann ich die Ausgabe von 1 bis 23 unterdrücken?

Software, IT, programmieren, C Sharp, Code, Programmiersprache, Script, Softwareentwicklung

Meistgelesene Beiträge zum Thema Programmieren