链接到页面位置的锚点

Question

我在一个页面中使用了四个选项卡。每个标签部分的内容都在页面的底部

喜欢

Header - style(fixed & height)
tabs(4) - tabTitle

tabContant1
tabContant2
tabContant3
tabContant4

由id定义的每个选项卡，当我单击tabTitle时，它会转到同一页面中相应的内容部分。

问题是，

例如，当我单击tabTitle2时，tab2Conetent会转到页眉中的页面顶部。同时，我有固定的页眉，所以tab2Content隐藏在页眉后面的一些部分。

如何在固定标题下显示内容

Answer 1

您可以使用jQuery来定义在页面中的确切位置，下面是一个如何让它为您工作的示例：

jQuery scroll to element

或者，如果您只想使用HTML，则可以放置文档内锚点，如下所示：

<div>
    <a name="MyStopOne"></a>
</div>
<div style="margin-top:20px;">
    My Content Part One
</div>

然后简单地使用HTML链接到它，如下所示：

<a href="#MyStopOne">Jump to Stop One</a>

请注意style=的“页边距-顶部”，它为您提供了一种在跳转到的位置和实际内容所在位置之间填充间距的方法，从而克服了静态标题在跳转时隐藏部分内容的问题。