一页导航不起作用

Question

header nav.bottom {
  width: 50em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  background: rgba(255, 255, 255, .8);
}
header nav.bottom ul {
  position: relative;
  z-index: 1;
}
header nav.bottom ul li {
  width: 10em;
  float: left;
}
header nav.bottom ul li a {
  color: #444;
}
section {
  margin: auto;
  padding: 1em;
  max-height: 30em;
  overflow-y: scroll;
  background: rgba(255, 255, 255, .8);
}
article {
  margin: auto;
  min-height: 30em;
}
article h2 {
  padding: 1em;
  font-size: 2em;
  line-height: 2em;
}

<script src="https://use.fontawesome.com/6d546bccd4.js"></script>
<nav class="bottom">
  <ul>
    <li>
      <a href="#about"><i aria-hidden="true" class="fa fa-hand-peace-o"></i> About</a>
    </li>
    <li>
      <a href="#blog"><i aria-hidden="true" class="fa fa-book"></i> Blog</a>
    </li>
    <li>
      <a href="#portfolio"><i aria-hidden="true" class="fa fa-folder-o"></i> Portfolio</a>
    </li>
    <li>
      <a href="#projects"><i aria-hidden="true" class="fa fa-flask"></i> Projects</a>
    </li>
  </ul>
</nav>
<section>
  <article id="#about">
    <h2>About</h2>
  </article>
  <article id="#blog">
    <h2>Blog</h2>
  </article>
  <article id="#portfolio">
    <h2>Portfolio</h2>
  </article>
  <article id="#projects">
    <h2>Projects</h2>
  </article>
</section>

Answer 1

元素的 id 不必包含哈希 (#)。 将您的标记更改为：

<section>
  <article id="about">
    <h2>About</h2>
  </article>
  <article id="blog">
    <h2>Blog</h2>
  </article>
  <article id="portfolio">
    <h2>Portfolio</h2>
  </article>
  <article id="projects">
    <h2>Projects</h2>
  </article>
</section>