📜 CSS平滑滚动生成器

⚙️ 滚动行为设置

设置平滑滚动和滚动边距,点击下方锚点按钮体验效果。

20px
40px

👁️ 实时预览

点击按钮平滑滚动到对应位置。

📍 区块 1

平滑滚动使页面切换更自然。scroll-padding 控制滚动容器的内边距。

📍 区块 2

scroll-behavior: smooth 为所有锚点滚动添加过渡动画。

📍 区块 3

scroll-margin 可以给单个元素设置额外的滚动偏移量,适合需要避开固定导航栏的场景。

💻 CSS代码

📖 CSS scroll-behavior 详解

scroll-behavior 控制元素滚动时的过渡动画。设置为 smooth 后,所有内部锚点跳转和 scrollIntoView() 调用都会带有平滑动画。

配合属性