本文将通过使用css 优化锚点 平滑滚动,默认我们在使用 html锚点 的时候,点击锚点链接默认是 立即跳转 到指定位置。

默认html锚点效果

1632644256

　我们可以看到默认的 html锚点 效果是 非常僵硬 的,用户体验 非常不好,下面我们就通过css去 优化锚点 使其 平滑滚动。

css滚动行为属性 scroll-behavior

　我们可以通过css的 滚动行为 属性 scroll-behavior 来 快速优化用户体验 使其默认 锚点平滑滚动。

属性 scroll-behavior 官方解释

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

　大致意思就是当触发滚动操作时候可以通过 scroll-behavior 属性控制其行为。

使用 scroll-behavior 属性优化锚点

　我们只需要在 html样式 里面加入一下代码即可实现,设置smooth 就可以平滑滚动了。

html{
    scroll-behavior: smooth;
}

1632645329

属性 scroll-behavior 介绍

  • auto 立即跳转也是默认属性
  • smooth 平滑滚动

参考文档

　通过以上使用 scroll-behavior 属性操作我们已经实现了 锚点平滑滚动 更多内容可以参考MDN-scroll-behavior文档。