当外部链接打开Tab时，页面滚动到顶部也固定了导航栏 [英] Page scrolls to top also fixed navbar when external link opens Tab

问题描述

我的导航中有一个链接可以打开页面上的特定选项卡，链接工作正常，但页面打开，因此内容的开头被固定的导航栏隐藏。任何人都可以帮助我，我是新手，并且在java中不是很好：

I have a link in my navigation that opens a specific tab on a page, the link works fine, but the page opens so the beginning of the content is hidden by the fixed navbar. Can anybody help me, I am new to bootstrap and not very good in java:

var gotoHashTab = function (customHash) {
    var hash = customHash || location.hash;
    var hashPieces = hash.split('?'),
        activeTab = $('[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// onready go to the tab requested in the page hash
gotoHashTab();

// when the nav item is selected update the page hash
$('.nav a').on('shown', function (e) {
    window.location.hash = e.target.hash;
})

// when a link within a tab is clicked, go to the tab requested
$('.tab-pane a').click(function (event) {
    if (event.target.hash) {
        gotoHashTab(event.target.hash);
    }
});

或是否有更好的脚本使用外部链接打开不同页面上的特定选项卡for bootstrap 3 ？

or is there a better script to use external links to open a specific tab on different page for bootstrap 3 ?

推荐答案

将类.anchor放在锚点（目标）上。

Put the class .anchor on the anchor (the target).

如果导航栏仅固定在某些尺寸上，那么??? px所在的位置，放置该断点的最小宽度（922px为md及以上，1200px适用于大型和上型，768px适用于小型和以上型号。

If the navbar is only fixed on certain sizes, then where the ???px is, put the min-width of that breakpoint (992px for md and up, 1200px for large and up, and 768px for small and up).

@media (min-width: ???px) {
  .anchor {
    padding-top: 60px;
    margin-top: -60px;
  }
}

如果在所有屏幕尺寸都固定：

If fixed at all screen sizes:

 .anchor {
    padding-top: 60px;
    margin-top: -60px;
  }

假设导航栏上的高度为50px。另外，根据getbootstrap.com示例，如果您的身体顶部填充具有导航栏高度的填充，则可能不。

Assumes height of 50px on the navbar. Also, this may not be necessary if your body top padding has the padding of the height of navbar as per the getbootstrap.com examples.

这篇关于当外部链接打开Tab时，页面滚动到顶部也固定了导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！