如何创建：平滑滚动
学习如何使用 CSS 创建平滑的滚动效果。
平滑滚动
Section 2
点击我，平滑滚动至上方第 1 部分。平滑滚动
为 <html> 元素添加 scroll-behavior: smooth 可以启用全页面的平滑滚动：
注意：也可以将其添加到特定元素/滚动容器中。
实例
html {
scroll-behavior: smooth;
}
浏览器支持
表中的数字注明了完全支持滚动行为属性的首个浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
跨浏览器解决方案
对于不支持 scroll-behavior 属性的浏览器，您可以使用 JavaScript 或 JavaScript 库（如 jQuery）来创建适用于所有浏览器的解决方案：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 为所有链接添加平滑滚动
$("a").on('click', function(event) {
// 在覆盖默认行为之前，确保 this.hash 具有值
if (this.hash !== "") {
// 防止默认的锚点点击行为
event.preventDefault();
// 存储哈希值
var hash = this.hash;
// 使用 jQuery 的 animate() 方法添加平滑的页面滚动
// 可选数字（800）指定滚动到指定区域所需的毫秒数
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// 完成滚动后，将井号 (#) 添加到 URL（默认点击行为）
window.location.hash = hash;
});
} // End if
});
});
</script>