使用 "data-toggle" 向下滚动到 Bootstrap 标签

Question

我在滚动到特定锚点时遇到问题，该锚点也是 bootstrap 选项卡。这是项目：

当页面加载时，活动选项卡 "Discover" 工作得非常好。它会滚动到正确的高度，但是，当您单击第二个选项卡时，由于某种原因它决定向上滚动。一旦新选项卡 "share" 处于活动状态，您就可以单击它，它会毫无问题地滚动到适当的高度。其余选项卡继续如此。这是 jquery:

 jQuery(document).ready(function ($) {

     $('.nav a').click(function (e) {
         e.preventDefault();
         $(this).tab('show')
     })$('a.scroll').on('click', function (e) {
         e.preventDefault();
         var href = $(this).attr('href');
         $('html, body').stop().animate({
            scrollTop: $(href).position().top - 280
         }, 'slow');
      });  
});

每个链接都有以下 class： <a href="#discover" data-toggle="tab" class="scroll">

我不明白这是怎么回事。任何反馈都会有所帮助。提前致谢。

Answer 1

看起来您的动画只是在每次点击标签时向上滚动 280 像素，因为它没有正确选择标签内容 div。

由于您所有的选项卡内容区域都有 class 'tab-pane'，这应该有效：

jQuery(document).ready(function ($) {

 $('.nav a').click(function (e) {
     e.preventDefault();
     $(this).tab('show')
 })$('a.scroll').on('click', function (e) {
     e.preventDefault();
     $('html, body').stop().animate({
        scrollTop: $('.tab-pane').offset().top - 280
     }, 'slow');
  });  
});

使用 "data-toggle" 向下滚动到 Bootstrap 标签

Scrolling Down to Bootstrap Tab using "data-toggle"

jquery

scrolltop

twitter-bootstrap