Link in einem Bootstrap Modal funktioniert nicht wie erwartet

Question

Ich habe eine Verknüpfung innerhalb Modal, und ich möchte Benutzer zu einem bestimmten Speicherort beim Klicken. Derzeit funktioniert dies das erste Mal, aber alle nachfolgenden Verwendungen des gleichen Modals bei der Verwendung des "Schließen" -Buttons (nicht des spezifischen Links) des Modals, es sendet mich auch zu meinem Link (nicht erwartetes Verhalten).

Hier ist eine JS-Geige, die das seltsame Verhalten eines Links in einem Bootstrap-Modal zeigt. https://jsfiddle.net/x9kr2wwm/5/

Mein Versuch ist eine Modifikation einer sehr ähnlichen Frage/Antwort (aber kein Duplikat) hier gefunden: CSS Bootstrap close modal and go to link

HTML:

See the <a href="#getstarted" id="gotoLink" data-dismiss="modal">"Get Started"</a> section for more 

Javascipt:

jQuery(function($) { 
      $("a#gotoLink").click(function(){ 
       $('#portfolioModal1').on('hidden.bs.modal', function (e) { 
        $('html, body').animate({ 
         scrollTop: $("#getstarted").offset().top 
        }, 2000); 
       }) 
      }); 
    }); 

Answer 1

Die Das Standardverhalten für ein <a> -Element ist, dass die Seite an ihr href-Attribut umgeleitet wird. Um das Standardverhalten zu verhindern, verwenden Sie die Methode .preventDefault() von jQuery.

jQuery(function($) { 
      $("a#gotoLink").click(function(event){ 
       event.preventDefault(); 

       $('#portfolioModal1').on('hidden.bs.modal', function (e) { 
        $('html, body').animate({ 
         scrollTop: $("#getstarted").offset().top 
        }, 2000); 
       }) 
      }); 
    });