html - ブートストラップのモーダルボディ内に複数の div を組み込むにはどうすればよいですか?

現在、複数の <div> を含む単一のモーダルを作成しようとしています。 modal-body div 内のタグ。

私がやっていることをベースにした例:

HTML:

<div class="modal-body">
<div id="main"> //Main Div or Menu

    <div class="card-deck">
      <div class="card">
        <a href="#" id="gen"> //Gen Trigger
         <div class="card-body">
            ... //Content
         </div>
        </a>
      </div>

      <div class="card">
        <a href="#" id="light"> //Light Trigger
         <div class="card-body">
           ...
         </div>
        </a>
      </div>
    
    </div>

<div id="gen-content" style="display: none"> //Modal That Gets Triggered.
 <div class="card-body p-0 m-0">
  <div class="text-right">
   <a class="btn btn-danger btn-back" href="#">Back</a>
  </div>
   Content
  </div>
</div>

<div id="light-content" style="display: none"> //Another Modal That Gets Triggered.
 <div class="card-body p-0 m-0">
  <div class="text-right">
   <a class="btn btn-danger btn-back" href="#">Back</a>
  </div>
   Content
  </div>
</div>
</div>

jQuery:

$("#gen").on('click', function() {
    $("#main").hide();
    $("#gen-content").show();
});
$("#light").on('click', function() {
   $("#main").hide();
   $("#light-content").show();
});

$(".btn-back").on('click', function(){
    $("#gen-content").hide();
    $("#main").show();
});

上記のコードは正常に動作しますが、「戻る」ボタンをクリックするとページが一番上までスクロールします。これを閉じると、元の

$("#gen").on('click', function() {
    $("#main").hide();
    $("#gen-content").show();
    return false;
});

$(".btn-back").on('click', function(){
    $("#gen-content").hide();
    $("#main").show();
    return false;
});