在https://codepen.io/dodozhang21/pen/KFkaf处有一支非常漂亮的笔（看来原始笔在https://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/处），它具有固定的菜单页脚和CSS3动画，可在各部分之间切换。但是，这些项目确实是固定的，当文本多于可用空间时，会导致布局中断。
因此想到了可以尝试对此进行现代化的想法。添加flex，或者首先使其具有响应性和移动性。相对于我一直在学习CSS的更多综合知识而言，这是很好的前后经验。我也将学习一些关于CSS3的知识。当前尝试是在https://codepen.io/veksi/pen/jegdXw（我已经删除了一些旧的东西并添加了一些东西），并且也插入了这篇文章。
现在有一个特定的症结点-甚至可能很多，这取决于一个人想去的深度。
问题
主要问题是我想设置一个完整的页面滚动，以便一个人可以从上到下滚动，也可以在选择其中一个小节后又向上滚动。当前，选择小节之一后，只能在该锚点位置上滚动，而不能在页面顶部上滚动。看来我在解决这个特定问题的知识上有空白。我注意到有些问题，例如抵消锚点，但是我不知道我不知道如何在特定情况下应用它们。
HTML很短，就在这里
html,body {
}
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
overflow: hidden;
display: flex;
/* If this rule is active, one gets a scroll bar.
Problem: Scrolling upwards to Section 1 does not work after clicking
any of the subsections.
*/
/* overflow: auto; */
}
main {
width: 100%;
}
section {
scroll-snap-align: start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top: 0.125rem black solid;
font-size: 2.25rem;
transform: translateZ(0);
transition: transform 0.6s ease-in-out;
width: 100%;
height: 100vh;
}
section p {
display: flex;
flex-direction: column;
}
nav {
width: 100%;
padding-top: 0.5em;
}
nav ul {
list-style: none;
width: inherit;
margin: 0;
}
ul li:nth-child(3n + 1), #main .panel:nth-child(3n + 1) {
background: rgb(0, 255, 180);
}
ul li:nth-child(3n + 2), #main .panel:nth-child(3n + 2) {
background: rgb(255, 65, 180);
}
ul li:nth-child(3n + 3), #main .panel:nth-child(3n + 3) {
background: rgb(0, 180, 255);
}
ul li {
display: inline-block;
margin: 0 8px;
margin: 0 0.5em;
padding: 0.3125em 0.5em;
padding: 0.3em 0.5em;
border-radius: 0.125em;
line-height: 1.5em;
}
ul li a {
color: #fff;
text-decoration: none;
}
.panel h1 {
font-family: sans-serif;
font-size: 4em;
font-size: 4em;
color: #fff;
position:relative;
line-height: 12.5em;
top: 33%;
text-align: center;
margin: 0;
}
footer {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
bottom: 0;
padding: 0;
background: #333333;
color: #212121;
}
div[id="section-1"]:target ~ main article section.panel {
transform: translateY(0vh);
}
div[id= "section-2"]:target ~ main article section.panel {
transform: translateY(-100%);
}
div[id= "section-3"]:target ~ main article section.panel {
transform: translateY(-200%);
}
div[id= "section-4"]:target ~ main article section.panel {
transform: translateY(-300%);
}
div[id= "section-5"]:target ~ main article section.panel {
transform: translateY(-400%);
}
/* This creates the trianble seen on the top. It's a square rotated and the
color of it is the same as the alternating background color to hide the
other side.
Problem: Have approximately the same effect without fixing the location.
*/
.st-deco {
width: 12.5em;
height: 12.5em;
position: absolute;
top: 0px;
left: 50%;
margin-left: -6.25em;
background: #fa96b5;
transform: translateY(-50%) rotate(45deg);
}
/* Problem: The following is fairly complex structure. How to simplify? */
[data-icon]:after {
content: attr(data-icon);
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 12.5em;
height: 12.5em;
line-height: 12.5em;
text-align: center;
font-size: 5.625em;
top: 50%;
left: 50%;
margin: -6.25em 0 0 -6.25em;
transform: rotate(-45deg) translateY(25%);
}
.st-color, .st-deco {
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}
[data-icon]:after {
content: attr(data-icon);
color: #ccc;
position: absolute;
width: 12.5em;
height: 12.5em;
line-height: 12.5em;
text-align: center;
font-size: 5.625rem;
top: 50%;
left: 50%;
margin: -6.25em 0 0 -6.25em;
transform: rotate(-45deg) translateY(25%);
}
.st-deco {
width: 7.5em;
height: 7.5em;
margin-left: -3.75em;
}
[data-icon]:after {
font-size: 3.75rem;
transform: rotate(-45deg) translateY(15%);
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
<div id="section-4"></div>
<div id="section-5"></div>
<main>
<article>
<section class="panel st-color" id="st-panel-1">
<div class="st-deco" data-icon="*"></div>
<p>Section One</p></section>
<section class="panel" id="st-panel-2">
<div class="st-deco" data-icon="*"></div>
<p>Section Two</p></section>
<section class="panel st-color" id="st-panel-3">
<div class="st-deco" data-icon="*"></div>
<p>Section Three</p>
<p>1: Lorem ipsum dolor sit amet...</p>
<p>2: Lorem ipsum dolor sit amet...</p>
<p>3: Lorem ipsum dolor sit amet...</p>
<p>4: Lorem ipsum dolor sit amet...</p>
<p>5: Lorem ipsum dolor sit amet...</p>
</section>
<section class="panel" id="st-panel-4">
<div class="st-deco" data-icon="*"></div>
<p>Section Four</p>
</section>
<section class="panel st-color" id="st-panel-5">
<div class="st-deco" data-icon="*"></div>
<p>Section Five</p>
</section>
</article>
</main>
<footer>
<nav>
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
<li><a href="#section-5">Section 5</a></li>
</ul>
</nav>
</footer>
</body>
</html>
（该代码段在小窗口中无法正确显示。）
第二个问题是内容位于节标题的顶部。我之所以这样说是因为它们与该滚动问题部分相关，正如CSS注释中所述，尽管出现了这个锚定问题，但我仍然可以滚动和滚动。这些可以通过稍微移动内容来解决，但我想这是一个单独的问题。我希望了解一些有关伪选择器的知识，以使其更好。
（顺便说一句，如果可以动态计算转换偏移，则可以在任意长度的内容上进行平滑滚动。就像“滚动到该锚点位置”一样。）