1 Frage zu Sprungmarke

Question

Wie kann ich mit Javascript realisieren, dass mit jedem Klick auf einen Button eine weitere Sprungmarke angesprungen wird?

Accepted Answer

Um 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 Spru... [mehr]

Accepted Answer

Um 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.

1 Frage zu Sprungmarke

Fragen und Antworten zum Thema Sprungmarke

Wie kann ich mit Javascript realisieren, dass mit jedem Klick auf einen Button eine weitere Sprungmarke angesprungen wird?