需求
- 点击标题，使用a标签的锚点自动跳到对应区域
- 滚动区域，右边自动切换对应的标题
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
margin: 0;
/* height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center; */
background: aliceblue;
/* ☆☆☆☆☆使页面平滑滚动到指定位置 */
scroll-behavior: smooth;
}
body {
padding: 0 15px;
}
h2 {
margin: 0;
padding: .8em 0;
scroll-margin: 20px;
}
.content {
view-timeline-name: var(--s);
view-timeline-inset: 50%;
}
nav {
position: fixed;
top: 15px;
right: 15px;
background: #fff;
padding: 10px 0;
border-radius: 4px;
overflow: hidden;
}
nav>a {
position: relative;
display: block;
line-height: 2;
padding: 0 15px;
font-size: 14px;
color: #191919;
text-decoration: none;
animation: active;
animation-timeline: var(--s);
border-left: 4px solid transparent;
}
@keyframes active {
0%,
100% {
color: #6f00ff;
border-color: #6f00ff;
}
}
nav>a:hover {
background-color: #d5d5d54a;
}
section {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
section span {
width: 30%;
height: 100px;
border-radius: 4px;
background-color: #E4CCFF;
}
</style>
</head>
<body>
<div>
<!-- ☆☆☆☆☆ 利用 a 标签的锚点实现点击跳转到有对应id的元素 -->
<body style="timeline-scope: --t1,--t2,--t3,--t4,--t5,--t6;">
<nav>
<a href="#t1" style="--s: --t1">一、标题一</a>
<a href="#t2" style="--s: --t2;">二、标题二</a>
<a href="#t3" style="--s: --t3">三、标题三</a>
<a href="#t4" style="--s: --t4">四、标题四</a>
<a href="#t5" style="--s: --t5">五、标题五</a>
<a href="#t6" style="--s: --t6">六、标题六</a>
</nav>
<h1>CSS 电梯导航</h1>
<div class="content" style="--s: --t1">
<h2 id="t1">一、标题一</h2>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
<div class="content" style="--s: --t2">
<h2 id="t2">二、标题二</h2>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
<div class="content" style="--s: --t3">
<h2 id="t3">三、标题三</h2>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
<div class="content" style="--s: --t4">
<h2 id="t4">四、标题四</h2>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
<div class="content" style="--s: --t5">
<h2 id="t5">五、标题五</h2>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
<div class="content" style="--s: --t6">
<h2 id="t6">六、标题六</h2>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
</body>
</div>
<script>
</script>
</body>
</html>