一 利用a标签中锚点定位(name定位)：


CSS滑动高亮侧边栏_a标签CSS滑动高亮侧边栏_锚点_02


1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <style>
10     .banner {
11       position: fixed;
12       top: 0px;
13     }
14 
15     .content {
16       display: flex;
17       flex-direction: column;
18       align-items: center;
19     }
20 
21     .content a {
22       display: inline-block;
23       width: 100px;
24       height: 400px;
25       border: 1px solid red;
26     }
27   </style>
28 </head>
29 
30 <body>
31   <!-- 
32 1 name定位：
33 //锚记
34 <a href="#mao">点击此处到指定位置</a>
35 //锚记位置
36 <a name="mao">指定位置</a>
37 
38 2 id定位：
39 //锚记
40 <a href="#mubiao">点击此处到目标位置</a>
41 //锚记位置
42 <div id="mubiao">
43  目标位置
44 </div>
45 
46    -->
47   <div class="banner">
48     <a href="#mao">00</a>
49     <a href="#mao1">11</a>
50     <a href="#mao2">22</a>
51     <a href="#mao3">33</a>
52   </div>
53   <div class="content">
54     <a name="mao">指定位置00</a>
55     <a name="mao1">指定位置11</a>
56     <a name="mao2">指定位置22</a>
57     <a name="mao3">指定位置33</a>
58   </div>
59 </body>
60 
61 </html>

View Code

 

 

二 锚点平滑跳转，导航跟随页面滚动到指定高度