在 Bootstrap 選項卡中滾動到頁面頂部

Question

我使用 bootstrap 4 創建一個標簽，如下所示：

<section class="main-section lightblue " id="wstabs">
    <a class="anchor" id="description"></a>

  <div class="bg-dark nav-tabs fixed-top" id="wstabs2" data-toggle="description">
    <div class="container">
      <ul class="nav  tabs-marker tabs-dark bg-dark" id="myTab" role="tablist">
          <li class="nav-item">
             <a class="nav-link active" id="text" data-toggle="tab" href="#text-tab" role="tab" aria-controls="text" aria-selected="true">tab1<span class="marker"></span></a>
          </li>
          <li class="nav-item">
             <a class="nav-link" id="feature" data-toggle="tab" href="#feature-tab" role="tab" aria-controls="feature" aria-selected="false">tab2<span class="marker"></span></a>
          </li>

        </ul>
    </div>
  </div>
  <div class="container" >
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="text-tab" role="tabpanel" aria-labelledby="text-tab">
        1
      <div class="tab-pane fade" id="feature-tab" role="tabpanel" aria-labelledby="feature-tab">
       2
      </div>
  </div>

</div>
</section>

有用。

現在我將 header 選項卡固定到頂部。

但我有一個問題。

例如，當我向下滾動並單擊 tab2 時，它可以工作，但我也希望它滾動到這一行的頂部：（選項卡的開頭）

<a class="anchor" id="description"></a>

怎么能這樣做？ 我無法為<a>標簽定義兩個錨點href鏈接。

這是一個活生生的例子： jsfiddle

Answer 1

您可以將事件偵聽器附加到每個 html 元素上

document.querySelectorAll('.nav-link').forEach(linkItem => {
  linkItem.addEventListener('click', _ => {
    window.scrollTo(0, 0)
  })
})

這是一個小提琴證明： https://jsfiddle.net/jgLewspb/