考试项目：新手有没有办法在没有JS的情况下创建单页滚动导航？

Question

我目前正在为我的考试项目而苦苦挣扎。我们已经学习了一点 HTML 和 CSS，但还没有学习任何 JS。 在这个项目中，我必须从头开始编写我的整个投资组合网站，并且不允许使用 Bootstrap 或任何类型的模板和预制的东西。我真的很想制作一个单页导航栏，它可以向下滚动到我的页面上的某个点——但看起来没有 JS 是不可能做到的。如果有人可以启发我，请做。非常感谢！

Answer 1

下面的代码对你有用。

HTML

<div class="button-groub">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
</div>
<section id="1" class="section1">1</section>
<section id="2" class="section2">2</section>
<section id="3" class="section3">3</section>
<section id="4" class="section4">4</section>

CSS

html {
  scroll-behavior: smooth;
}

.button-groub{
  position: fixed;
  bottom: 20vh;
  right: 10vh;
  z-index: 2;
  display: flex;
}
.button-groub > a {
  margin-right: 2px;
  display: inline-block;
  padding: 5px;
  background-color: grey;
  color: black;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease-in-out;

}
.section1 {
  background-color: #34495e;
}
.section2 {
  background-color: #9b59b6;
}
.section3 {
  background-color: #3498db;
}
.section4 {
  background-color: #f1c40f;
}