在 Bootstrap 选项卡中滚动到页面顶部

Question

I create a tab with bootstrap 4 like this:

<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>

It works.

Now I fixed the header tab to top.

But I have a problem.

For example, when I scroll down and click on tab2, it works but I also want it scrolls to top in this line: (the begin of tabs)

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

How can do that? I can not define two anchors href links for <a> tag.

This Is a live example: jsfiddle

Answer 1

You could attach event listeners to each of your html elements which have a class of nav link and then trigger a scroll up function to bring the view to the top

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

Here is a fiddle proof: https://jsfiddle.net/jgLewspb/