平滑滚动
创建于 2024-12-03 /
25
字体：
[默认]
[大]
[更大]
了解如何使用 CSS 创建平滑的滚动效果。
平滑滚动
第 1 节
点击链接查看"流畅"的滚动效果。
点击我平滑滚动到下面的第2节注意:移除 scroll-behavior 属性以移除平滑滚动。
第 2 节
点击我平滑滚动到上面的第1节平滑滚动
在 <html> 元素上添加scroll-behavior:smooth，实现整个页面的平滑滚动（注意:也可以添加到特定元素/容器滚动）:
实例
html {scroll-behavior: smooth;
} 亲自试一试 »
浏览器支持
表中的数字指定了第一个完全支持滚动行为属性的浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| scroll-behavior | 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
跨浏览器解决方案
对于不支持 scroll-behavior 属性的浏览器，您可以使用 JavaScript 或 JavaScript 库，例如 jQuery，创建适用于所有浏览器的解决方案:
实例
<script src="https://cdn.staticfile.org/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() 方法添加平滑的页面滚动
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// 滚动完成时向 URL 添加井号 (#)（默认点击行为）
window.location.hash = hash;
});
} // End if
});
});
</script>
提示:在我们的 CSS 参考中了解有关滚动行为属性的更多信息:CSS 滚动行为属性。
0 人点赞过
