Anchor tags are not working after the position is fixed

Question

I've tried the method increasing z-index of the div of the navigation bar. But somehow the nav bar's anchor tag/ link isn't working after I fixed the position of the nav bar.

#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

You need to add ids to the following sections/divs in the main section of the page :

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

and so on.
So the anchor tag can direct you to that particular section/div.

Answer 2

The issue is with the href,try it after removing the # symbol from your href of the li tag.

#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>