Question

这是我的页面：this one。如果单击左侧边栏上的链接，您将看到它们跳转但标题错过了（在导航栏下方）。

如何让链接跳转到标题上方50px（然后将显示标题？

非常感谢。

编辑：代码：

＆＃13;

#sidebar {
	text-decoration: none;
	position: fixed;
	margin-left: 0;
	margin-right: 5%;
	width: 15%;
	background-color: #f9f9f9;
	overflow: auto;
	word-wrap: break-word;
	top: 60px; 
	bottom:0;
}

＆＃13;

<h2 class="decorated" id="AtomsEPT">Atoms, Elements and the Periodic Table</h2>
<p style="padding-bottom: 600px">TEXT</p>
<h2 class="decorated" id="Group1">Group 1</h2>
<p style="padding-bottom: 600px">TEXT</p>
<h2 id="Group7">Group 7</h2>
<p style="padding-bottom: 200px">TEXT</p>
<h2 id="Group0">Group 0 - Noble gases</h2>

＆＃13;

Answer 1

棘手的部分是，它实际上完全正常工作，它只是看起来不像是因为你正在修复你的顶部栏，所以标题显示在你的顶部导航元素后面。 / p>

你有几个选择：你无法修复你的顶级导航;你可以使用javascript滚动而不是锚标签;或者你可以使用实际去的每个锚点上方的隐藏元素而不是标题。

<强> 修改

this method

可能很容易实现第三个选项

Answer 2

尝试将此添加到您的css

body{ padding-top: 60px; }

我看到你使用了很多内联css，你可以这样做，如果你想做内联css：

<body style="padding-top: 60px;">

这将在固定导航栏后面的页面顶部放置一些填充。然后，页面正文将从导航栏下方开始，并在链接锚链接时不隐藏标题。

Answer 3

您可以在标题中添加填充顶部，不包括第一个：

#sidebar {
	text-decoration: none;
	position: fixed;
	margin-left: 0;
	margin-right: 5%;
	width: 15%;
	background-color: #f9f9f9;
	overflow: auto;
	word-wrap: break-word;
	top: 60px; 
	bottom:0;
}

#content > h2:not(:first-of-type) {
  padding-top: 60px;
}

<div id="content">
  <h2 class="decorated" id="AtomsEPT">Atoms, Elements and the Periodic Table</h2>
  <p style="padding-bottom: 600px">TEXT</p>
  <h2 class="decorated" id="Group1">Group 1</h2>
  <p style="padding-bottom: 600px">TEXT</p>
  <h2 id="Group7">Group 7</h2>
  <p style="padding-bottom: 200px">TEXT</p>
  <h2 id="Group0">Group 0 - Noble gases</h2>
</div>

如何使滚动链接链接到锚点下方

3 个答案: