ブートストラップ内のリンクモーダルが期待通りに機能しない

Question

モーダルの中にリンクがあり、クリックすると特定の場所に移動したい。現在のところ、これは初めての動作ですが、モーダルの「閉じる」ボタン（特定のリンクではない）を使用しているときに同じモーダルを使用すると、それは私のリンクに送信されます（予期しない動作です）。

ここには、ブートストラップモードのリンクの奇妙な動作を示すjsフィドルがあります。 https://jsfiddle.net/x9kr2wwm/5/

私の試みはここで見つける非常によく似た質問/答え（ただし、重複）の変形例である：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

<a>要素のデフォルトの動作は、ページがそのhref属性にリダイレクトされることです。デフォルトの動作を防ぐには、jQueryの.preventDefault()メソッドを使用してください。

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

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