如何滚动到引导选项卡中的元素

<div class="tab-container">
  <div class="tab" id="tab1">选项卡1</div>
  <div class="tab" id="tab2">选项卡2</div>
  <div class="tab" id="tab3">选项卡3</div>
</div>

.tab-container {
  overflow: auto;
  height: 200px; /* 设置容器高度，使内容可滚动 */
}

.tab {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

// 获取选项卡元素
const tab1 = document.getElementById('tab1');
const tab2 = document.getElementById('tab2');
const tab3 = document.getElementById('tab3');

// 监听选项卡点击事件
tab1.addEventListener('click', scrollToTab);
tab2.addEventListener('click', scrollToTab);
tab3.addEventListener('click', scrollToTab);

// 滚动到选项卡的函数
function scrollToTab(event) {
  const targetTab = event.target;
  const container = document.querySelector('.tab-container');
  const targetOffset = targetTab.offsetTop;

  container.scrollTo({
    top: targetOffset,
    behavior: 'smooth' // 使用平滑滚动动画
  });
}