点击标题，使用a标签的锚点自动跳到对应区域 滚动区域，右边自动切换对应的标题 < ! 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 ;
background: aliceblue;
scroll- behavior: smooth;
}
body {
padding: 0 15 px;
}
h2 {
margin: 0 ;
padding: .8 em 0 ;
scroll- margin: 20 px;
}
. content {
view- timeline- name: var ( -- s) ;
view- timeline- inset: 50 % ;
}
nav {
position: fixed;
top: 15 px;
right: 15 px;
background: #fff;
padding: 10 px 0 ;
border- radius: 4 px;
overflow: hidden;
}
nav> a {
position: relative;
display: block;
line- height: 2 ;
padding: 0 15 px;
font- size: 14 px;
color: #191919 ;
text- decoration: none;
animation: active;
animation- timeline: var ( -- s) ;
border- left: 4 px solid transparent;
}
@keyframes active {
0 % ,
100 % {
color: #6 f00ff;
border- color: #6 f00ff;
}
}
nav> a: hover {
background- color: #d5d5d54a;
}
section {
display: flex;
flex- wrap: wrap;
gap: 10 px;
}
section span {
width: 30 % ;
height: 100 px;
border- radius: 4 px;
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>
