Bootstrap 5:第二列中的表跳转到第一列以下

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">表头1</th>
            <th scope="col">表头2</th>
            <th scope="col">表头3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
          </tr>
          <!-- 其他数据行 -->
        </tbody>
      </table>
    </div>
    <div class="col">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">表头4</th>
            <th scope="col">表头5</th>
            <th scope="col">表头6</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
          </tr>
          <!-- 其他数据行 -->
        </tbody>
      </table>
      <button onclick="scrollToTable()" class="btn btn-primary">跳转到第一列以下</button>
    </div>
  </div>
</div>

<script>
function scrollToTable() {
  const table = document.querySelector('.table');
  table.scrollIntoView({ behavior: 'smooth' });
}
</script>