打开Bootstrap Modal时页面滚至顶部且关闭后无法恢复位置求助

问题 #

打开Bootstrap Modal时，页面会自动滚动至顶部；关闭Modal后，页面仍停留在顶部位置。以下是相关实现代码：

HTML（Blade引擎） #

<div class="row mt-0 name">           
 <a class="text-wrapper text-xs inviteeModel" id="inviteeModel"
          data-table="{{ $seatedTable->table->id }}"
          data-invitee="{{ $invitee['id'] }}"
          data-seats_taken="{{ $invitee['seats_taken'] }}"
          data-total_seats_taken="{{ $seatedTable->totalSeatsTaken }}"
          data-toggle="modal"                                               
          href="javascript:void(0)">
           {{ $invitee['name'] }}
           <span class="text-xs">
               ({{ $invitee['confirmed_invitees_count'] }})
           </span>
   </a>                                     
</div>

JavaScript #

<script>
    $(document).ready(function() {
        const tableInvitees = @json($seatedTable->invitees);
        console.log(tableInvitees);
        tableInvitees.forEach(function(invitee) {
            $('.inviteeModel').click(function(e) {
                const inviteeBtn = $(this);
                const modal = $(`#table${inviteeBtn.data('table')}Modal`);
                console.log(modal);
                modal.find('input.invitee_id').val(inviteeBtn.data('invitee'));
                modal.find('input.seats_taken').val(inviteeBtn.data('seats_taken'));
                modal.find('input.temp_seats_taken').val(inviteeBtn.data('seats_taken'));
                modal.find('input.total_seats_taken').val(inviteeBtn.data('total_seats_taken'));
                modal.modal('show');
            });
        });
    });
</script>

body标签代码 #

<body class="vertical-layout vertical-menu-modern  navbar-floating footer-static  " data-open="click"
    data-menu="vertical-menu-modern" data-col="">
</body>

解决方案 #

问题根源 #

1. 重复绑定点击事件：tableInvitees.forEach循环中，每遍历一个invitee就给所有.inviteeModel元素绑定一次点击事件，导致同一元素被多次绑定，触发时重复执行modal('show')，引发滚动异常。
2. 未阻止a标签默认行为：尽管href设为javascript:void(0)，但结合data-toggle="modal"，锚点的默认跳转行为仍可能被触发，导致页面滚动到顶部。

修复步骤 #

• 阻止a标签默认行为：在点击事件处理函数开头添加e.preventDefault()，彻底阻止锚点的默认跳转：

  $('.inviteeModel').click(function(e) {
      e.preventDefault(); // 新增此行
      const inviteeBtn = $(this);
      // 后续代码保持不变
  });
  

• 移除重复事件绑定：无需在forEach循环内绑定事件，直接给.inviteeModel绑定一次即可，避免多次触发：

  $(document).ready(function() {
      const tableInvitees = @json($seatedTable->invitees);
      console.log(tableInvitees);
      // 移除forEach循环，直接绑定事件
      $('.inviteeModel').click(function(e) {
          e.preventDefault();
          const inviteeBtn = $(this);
          const modal = $(`#table${inviteeBtn.data('table')}Modal`);
          console.log(modal);
          modal.find('input.invitee_id').val(inviteeBtn.data('invitee'));
          modal.find('input.seats_taken').val(inviteeBtn.data('seats_taken'));
          modal.find('input.temp_seats_taken').val(inviteeBtn.data('seats_taken'));
          modal.find('input.total_seats_taken').val(inviteeBtn.data('total_seats_taken'));
          modal.modal('show');
      });
  });
  

• 可选：移除冗余属性：由于已经通过JS手动调用modal('show')，data-toggle="modal"可能和JS代码冲突，可从a标签中移除该属性：

  <a class="text-wrapper text-xs inviteeModel" id="inviteeModel"
          data-table="{{ $seatedTable->table->id }}"
          data-invitee="{{ $invitee['id'] }}"
          data-seats_taken="{{ $invitee['seats_taken'] }}"
          data-total_seats_taken="{{ $seatedTable->totalSeatsTaken }}"
          href="javascript:void(0)">
  

内容的提问来源于stack exchange，提问作者kinan