中午在【掘金】潜水摸鱼，看到这一个沸点，个人已经撸出特效；
下面放上 作者 的 掘金 地址 #掘金沸点# https://juejin.im/pin/5d649eaaf265da19752533db
效果图：
HTML：
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>scroll-behavior让你的页面导航更加丝滑</title> 9 <style> 10 div#app{width:100%;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ccc} 11 nav{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;align-self:center;justify-content:center;border:1px solid #ccc} 12 nav a{display:inline-block;flex:1;font-size:18px;text-align:center} 13 section.scroll-container{display:block;width:100%;height:400px;overflow-y:hidden;scroll-behavior:smooth} 14 div.scroll-page{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;color:#fff} 15 div#page-1{background:saddlebrown;} 16 div#page-2{background:salmon;} 17 div#page-3{background:seagreen;} 18 </style> 19 </head> 20 21 <body> 22 <div id="app"> 23 <nav> 24 <a href="#page-1">page-1</a> 25 <a href="#page-2">page-2</a> 26 <a href="#page-3">page-3</a> 27 </nav> 28 <section class="scroll-container"> 29 <div class="scroll-page" id="page-1">1</div> 30 <div class="scroll-page" id="page-2">2</div> 31 <div class="scroll-page" id="page-3">3</div> 32 </section> 33 </div> 34 </body> 35 36 </html>