Question

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

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

由于

Answer 1

关于ID，您无需将其放在标题内的<a>。只需使用：

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

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

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

#C4:target {background: red;}

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

1 个答案: