时间戳

首页 > 解决方案 > 在 Bootstrap 选项卡中滚动到页面顶部

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

问题描述

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

怎么能这样做？我无法为标签定义两个锚href链接。<a>

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

标签： javascripthtmltwitter-bootstrapbootstrap-4

解决方案

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

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

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

推荐阅读