一 利用a标签中锚点定位(name定位)：
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 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>
二 锚点平滑跳转，导航跟随页面滚动到指定高度：https://blog.csdn.net/GLyihu/article/details/95943988