如何实现点击按钮后跳转到Bootstrap导航标签页顶部而非中部？

嘿，我完全懂你遇到的困扰——Bootstrap标签页切换时，默认会跟着锚点滚动到对应内容区域，所以点击按钮后页面就停在了中部。这里给你两个实用的解决方案，既能保证标签页正常切换，又能让页面直接回到顶部：

推荐方案：用Bootstrap官方Tab API + 手动滚动 #

直接调用Bootstrap提供的tab('show')方法切换标签页，避开浏览器默认的锚点滚动行为，之后再主动控制页面滚动到顶部：

$('#gotonew').click(function() {
  // 获取目标标签页的触发元素
  const targetTab = $('a[href="#whatsNew"]');
  // 用Bootstrap官方方法切换标签页
  targetTab.tab('show');
  // 平滑滚动到页面顶部（想要瞬间跳转可以换成scrollTop(0)）
  $('html, body').animate({ scrollTop: 0 }, 'fast');
  console.log(targetTab.text() + ' click triggered');
});

为什么这个方法能解决问题？ #

你原来的代码直接触发a标签的click事件，浏览器会优先处理锚点跳转（自动滚动到#whatsNew元素所在位置），所以页面停在了中部。而tab('show')是Bootstrap专门的标签切换方法，不会触发默认的锚点滚动，之后我们再手动控制页面滚动到顶部，就能完全达到你想要的效果。

备选方案：阻止锚点默认行为 #

如果你更倾向于保留模拟点击的逻辑，可以在目标a标签的点击事件里阻止默认锚点行为，再完成切换和滚动：

$('#gotonew').click(function() {
  const targetTab = $('a[href="#whatsNew"]');
  // 给目标标签绑定一次阻止默认行为的事件（用one避免重复绑定）
  targetTab.one('click', function(e) {
    e.preventDefault();
    $(this).tab('show');
    $('html, body').scrollTop(0);
  });
  // 触发点击
  targetTab.click();
  console.log(targetTab.text() + ' click triggered');
});

内容的提问来源于stack exchange，提问作者Alex