Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!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>第 1 节</h2> <p>点击链接可以看到“平滑”的滚动效果。</p> <a href="#section2">单击我以平滑滚动到下面的第 2 部分</a> <p>注意：删除 scroll-behavior 属性以删除平滑滚动。</p> </div> <div class="main" id="section2"> <h2>第 2 节</h2> <a href="#section1">单击我以平滑滚动到上面的第 1 部分</a> </div> <p><strong>注意：</strong> Internet Explorer 不支持 scroll-behavior 属性。</p> </body> </html>