Bei ACF (Advanced Custom Fields) ist eine Button-Gruppe ein benutzerdefiniertes Feld, das es ermöglicht, mehrere Schaltflächen (Buttons) zu erstellen, aus denen der Benutzer auswählen k... [mehr]
Wie kann ich mit Javascript realisieren, dass mit jedem Klick auf einen Button eine weitere Sprungmarke angesprungen wird?
AntwortUm mit JavaScript zu realisieren, dass bei jedem Klick auf einen Button eine weitere Sprungmarke angesprungen wird, kannst du folgendes Beispiel verwenden: 1. Erstelle HTML-Elemente für die Sprungmarken und den Button. 2. Verwende JavaScript, um die Sprungmarken zu verwalten und beim Klicken auf den Button zur nächsten Sprungmarke zu springen. Hier ist ein einfaches Beispiel: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sprungmarken Beispiel</title> <style> .section { height: 100vh; /* Jede Sektion hat die Höhe des Viewports */ display: flex; align-items: center; justify-content: center; font-size: 2em; } </style> </head> <body> <div id="section1" class="section" style="background-color: lightcoral;">Sektion 1</div> <div id="section2" class="section" style="background-color: lightblue;">Sektion 2</div> <div id="section3" class="section" style="background-color: lightgreen;">Sektion 3</div> <div id="section4" class="section" style="background-color: lightyellow;">Sektion 4</div> <button id="jumpButton">Nächste Sektion</button> <script> let currentSection = 1; const totalSections = 4; document.getElementById('jumpButton').addEventListener('click', function() { if (currentSection < totalSections) { currentSection++; } else { currentSection = 1; // Zurück zur ersten Sektion } document.getElementById('section' + currentSection).scrollIntoView({ behavior: 'smooth' }); }); </script> </body> </html> ``` In diesem Beispiel gibt es vier Sektionen, und bei jedem Klick auf den Button wird zur nächsten Sektion gesprungen. Wenn die letzte Sektion erreicht ist, springt es wieder zur ersten Sektion zurück. Die Methode `scrollIntoView` sorgt dafür, dass der Sprung sanft erfolgt.
