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

【问题标题】：Scroll to the top of the page in the Bootstrap tab在 Bootstrap 选项卡中滚动到页面顶部
【发布时间】：2020-05-16 20:40:35
【问题描述】：

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

有效。

现在我将标题选项卡固定到顶部。

但是我有一个问题。

例如，当我向下滚动并单击 tab2 时，它可以工作，但我也想要它滚动到这一行的顶部：（标签的开头）

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

如何做到这一点？我无法为<a> 标签定义两个锚点href 链接。

这是一个活生生的例子：jsfiddle

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

您可以将事件侦听器附加到具有导航链接类的每个 html 元素，然后触发向上滚动功能以将视图带到顶部

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

这是一个小提琴证明：https://jsfiddle.net/jgLewspb/

【讨论】：