W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> html { scroll-behavior: smooth; } #section1 { height: 600px; background-color: pink; } #section2 { height: 600px; background-color: yellow; } </style> </head> <body> <h1>平滑的滚动</h1> <div class="main" id="section1"> <h2>第一章</h2> <p>请点击链接来查看平滑的滚动效果。</p> <a href="#section2">点击我会平滑滚动到下面的第二章</a> <p class="note"><span>注释：</span>删除 scroll-behavior 属性可清楚平滑滚动。</p> </div> <div class="main" id="section2"> <h2>第二章</h2> <a href="#section1">点击我可平滑滚动到上面的第一章</a> </div> <p><b>注释：</b>Internet Explorer 不支持 scroll-behavior 属性。</p> </body> </html>