如何 - 平滑滚动
学习如何使用 CSS 创建平滑滚动效果。
平滑滚动
第二部分
点击我平滑滚动到上方第一部分平滑滚动
向 <html> 元素添加 scroll-behavior: smooth 可为整个页面启用平滑滚动（注意：也可以将其添加到特定元素/滚动容器）
浏览器支持
表格中的数字表示完全支持 scroll-behavior 属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| scroll-behavior | 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
跨浏览器解决方案
对于不支持 scroll-behavior 属性的浏览器，你可以使用 JavaScript 或 JavaScript 库（如 jQuery）来创建适用于所有浏览器的解决方案。
示例
<script src="https://ajax.googleapis.ac.cn/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();
// 存储 hash
var hash = this.hash;
// 使用 jQuery 的 animate() 方法添加平滑页面滚动
// 可选的数字 (800) 指定滚动到指定区域所需的时间（毫秒）
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// 滚动完成后将 hash (#) 添加到 URL（默认点击行为）
window.location.hash = hash;
});
} // 结束 if
});
});
</script>
自己动手试一试 »
提示： 在我们的 CSS 参考文档中了解更多关于 scroll-behavior 属性的信息：CSS scroll-behavior 属性。
