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

这是我的 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 中的关于我们时，它会转到同一个地方。即使我试图跳转到文档的不同部分，它也会一直跳到同一部分。这是为什么？

编辑:上面似乎工作正常，当我跳转到一个标题时，它隐藏在顶部的栏后面。有什么方法可以让它跳到顶部栏下方的某个点吗？

谢谢

最佳答案

关于 ID，您不需要将其放在 <a> 上标题内。只需使用这个:

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

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

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

#C4:target {background: red;}

关于css - 为什么页面没有跳转到屏幕的正确部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20038341/

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

上一篇：css - 防止背景图像缩放

下一篇：css - 具有固定宽度、固定位置侧边栏的居中 div