操作指南 - 平滑滚动
了解如何使用 CSS 创建平滑滚动效果。
平滑滚动
部分 2
单击我以平滑滚动到上面的部分 1平滑滚动
将 scroll-behavior: smooth 添加到 <html> 元素以启用整个页面的平滑滚动（注意：也可以将其添加到特定元素/滚动容器中）
浏览器支持
表中的数字指定完全支持 scroll-behavior 属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| scroll-behavior | 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;
});
} // 结束 if
});
});
</script>
自己尝试 »
提示：在我们的 CSS 参考中了解更多关于 scroll-behavior 属性的信息：CSS scroll-behavior 属性.
