为什么页面没有跳转到屏幕的正确部分？答案

【问题标题】：Why is the page not jumping to the correct part of the screen?为什么页面没有跳转到屏幕的正确部分？
【发布时间】：2013-11-18 00:59:52
【问题描述】：

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
  margin: 0px;
  padding: 0px;
}
#wrapper {
  width: 100%;
  height: auto;
  background-color: #ABEBC1;
  position: fixed;
}

#nav {
  width: 1400px;
  height: auto;
  margin: auto;
}

.buttons {
  height: 25x;
  width: 200px;
  background-color: #ABEBC1;
  background-repeat: repeat-x;
  float: left;
  margin: 0px 10px;
  text-align: center;
  font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>

<div id="wrapper">
  <div id="nav">
  <div class="buttons">
  </div>
  <div class="buttons"><a href="#C4">About Us</a></div>
  <div class="buttons">Our Staff</div>
  <div class="buttons">New Admissions</div>
  <div class="buttons">A-Level</div>
  <div class="buttons">GCSE</div>
  <div class="buttons">Contact Us</div>
  </div>
</div>
<br/>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

我已从 w3schools 上的 tryit 复制并粘贴代码，您可以使用此处的超链接跳转到网站的任何部分：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations。当我点击“第 4 章”链接时，它会跳转到第 2 章，当我点击顶部 div 中的 About Us 时，它会跳转到同一个地方。即使我试图跳到文档的不同部分，它也会一直跳到同一个部分。这是为什么呢？

编辑：上面似乎工作正常，当我跳到一个标题时，它隐藏在顶部的栏后面。有什么办法让它跳到顶栏下方的位置吗？

谢谢

【问题讨论】：

两个链接都可以工作，并且对我来说去同一个地方jsfiddle.net/D4fRQ
是的，问题是位置不对
这有什么问题？具有匹配 ID 的元素按原样移至视口顶部。
匹配的ID是文本“Chapter 4”，但它跳转到Chapter 2
在查看您的链接后它可以正常工作，但如果您将其放入 html 文件并运行，则无法正常工作？

标签： css html hyperlink

【解决方案1】：

关于 ID，您无需将其放在标题内的 <a> 上。就用这个吧：

<h2 id="C4">Chapter 4</h2>

关于固定头的清除，这里有一些关于这个问题的方便文章：

关于跳转到第 2 章的链接，可能取决于浏览器窗口的高度。它只能在内容允许的范围内下降。如果您使用:target，您仍然会看到第 4 章的标题是有针对性的。例如

#C4:target {background: red;}

【讨论】：

我通过在 div 之间添加换行符修复了跳转到第 2 章的问题（奇怪）。我仍然对如何进行跳转感到困惑，以便它不会一直跳到顶部并且文本从菜单栏下方开始