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