Home
JS
JS
Tryit: JAVASCRIPT
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> #section1 { height: 600px; background-color: pink; } #section2 { height: 600px; background-color: yellow; } </style> </head> <body> <h1>平滑滚动</h1> <p>在单击“应用平滑滚动效果”按钮之前单击粉色和黄色 DIV 内的链接 - 以查看应用平滑滚动效果前后的效果。</p> <p>注意：IE 11（及更早版本）和 Safari 13（及更早版本）不支持 scrollBehavior 属性。</p> <button onclick="myFunction()">应用平滑滚动效果</button> <div class="main" id="section1"> <h2>第 1 节</h2> <a href="#section2">单击我转到下面的第 2 部分</a> </div> <div class="main" id="section2"> <h2>第 2 节</h2> <a href="#section1">单击我转到上面的第 1 部分</a> </div> <script> function myFunction() { document.documentElement.style.scrollBehavior = "smooth"; } </script> </body> </html>