显示选项卡后向上滚动

Scroll top after showing a tab

本文关键字：滚动 选项 显示      更新时间：2023-09-26

我的页面上有Bootstrap选项卡，但当我点击它时，这些选项卡是隐藏的。有没有办法向上滚动位置，以便可以看到选项卡？我找不到任何帮助。我无法更改选项卡的位置或使用隐藏的锚点-选项卡就是锚点。

<ul class="nav nav-tabs" role="tablist">
    <li class="active bio" role="presentation"><a href="#bio" role="tab" data-toggle="tab">biografie</a></li>
    <li class="films hidden-sm hidden-md hidden-lg" role="presentation"><a href="#films" aria-controls="films" role="tab" data-toggle="tab">filmografie</a></li>
    <li class="trivia hidden-xs" role="presentation"><a href="#trivia" role="tab" data-toggle="tab">zajímavosti</a></li>
    <li class="awards hidden-xs" role="presentation"><a href="#awards" role="tab" data-toggle="tab">ocenění</a></li>
    <li class="videos hidden-xs" role="presentation"><a href="#videos" role="tab" data-toggle="tab">videa</a></li>
    <li class="gallery hidden-xs" role="presentation"><a href="#gallery" role="tab" data-toggle="tab">galerie</a></li>
    <li class="contact hidden-xs" role="presentation"><a href="#contact" role="tab" data-toggle="tab">kontakt</a></li>
</ul>

这是我用来获取锚点的JS：

  $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
  });
  var hash = window.location.hash;
  $('.nav-tabs a[href="' + hash + '"]').tab('show');

带有选项卡的页面：http://testovani-frameworku.wz.cz/jennifer-lawrence.html#awards

如果你想登顶，你可以用几种方法

window.scrollTo(0, 0);

或

$("mySelector").animate({ scrollTop: 0 }, "fast");

或

$(window).scrollTop(0);

这取决于你想要什么类型的效果。如果你不想要动画效果，可以直接将scrollTop设置为0（这是非常顶部的）。可以使用香草JS window.scrollTo(x,y)

希望这能有所帮助！

我就是这样解决的。我在选项卡ID的末尾添加了"-tab"，原始ID有链接。

$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
    var id = $(e.target).attr("href").substr(1);
    id = id.substring(0, id.length-4);
    window.location.hash = id;    
});
var hash = (window.location.hash);
$('.nav-tabs a[href="' + hash + '-tab"]').tab('show');
相关文章：