javascript - 粘性导航和滚动到顶部困惑

Question

我在页面中间有一个粘性导航(议程日)，当粘性导航的内容向下滚动时，它会变得固定。导航是 Bootstrap 标签，这是 HTML 的样子:

<ul class="nav nav-tabs followMeBar agenda-days text-center">
  <li class="active"><a class="day" href="#1" data-toggle="tab">Day 1</a></li>
  <li><a class="day" href="#2" data-toggle="tab">Day 2</a></li>
  <li><a class="day" href="#3" data-toggle="tab">Day 3</a></li>
</ul>

标签内容位于具有相应 id 的 div 中，如下所示:

<div class="tab-pane" id="1">
    <h3>Day 1</h3>

除一件事外一切正常，如果您在第 1 天向下滚动一半然后单击第 2 天，内容切换到第 2 天但您仍然向下滚动一半。如何让第 1 天、第 2 天、第 3 天切换内容并滚动到议程内容的顶部(而不是页面顶部)。

这是我的完整代码示例:https://codepen.io/anon/pen/POvGPr

Answer 1

首先将类添加到 days 链接的 li 容器中。其次，例如在天数导航之前添加一个选择器。

<div class="test"></div>

<li class="active scroll-top"><a  href="#1" data-toggle="tab">Day 1</a></li>

  $('.scroll-top').click(function(){
     $('html,body').animate({
       scrollTop: $(".test").offset().top},
       'slow');
  });