考试项目：新手有没有办法在没有 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;
}

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

Exam-project: Is there any way for a newbie to create a onepage scroll-nav without JS?

html

css

navigation