html - 固定位置后锚标签不起作用

Question

我试过增加导航栏z-index的方法。div但不知何故，在我固定导航栏的位置后，导航栏的锚标签/链接不起作用。

#navbar {
  grid-area: navbar;
  padding: 1em 1em;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

<nav id="navbar">
  <header>
    <h1>JS Documentation</h1>
  </header>
  <ul id="nav-list">
    <li class="list"><a href="#introduction" class="nav-link">Introduction</a></li>
    <li class="list"><a href="#What_you_should_already_know" class="nav-link">What you should already know</a></li>
    <li class="list"><a href="#javascript_and_java" class="nav-link">Javascript and Java</a></li>
    <li class="list"><a href="#hello_world" class="nav-link">Hello world</a></li>
    <li class="list"><a href="#variables" class="nav-link">Variables</a></li>
  </ul>
</nav>

Answer 1

问题出在href上，从li标签的href中删除#符号后尝试。

#navbar {
  grid-area: navbar;
  padding: 1em 1em;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

<nav id="navbar">
  <header>
    <h1>JS Documentation</h1>
  </header>
  <ul id="nav-list">
    <li class="list"><a href="introduction" class="nav-link">Introduction</a></li>
    <li class="list"><a href="What_you_should_already_know" class="nav-link">What you should already know</a></li>
    <li class="list"><a href="javascript_and_java" class="nav-link">Javascript and Java</a></li>
    <li class="list"><a href="hello_world" class="nav-link">Hello world</a></li>
    <li class="list"><a href="variables" class="nav-link">Variables</a></li>
  </ul>
</nav>

Answer 2

您需要在页面主要部分的以下部分/div 中添加 id：

<div id="introduction">
</div>
<div id="What_you_should_already_know">
</div>
<div id="javascript_and_java">
</div>

等等。
所以锚标签可以引导你到那个特定的部分/div。