> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/html-kuai-su-shi-xian-ping-hua-gun-dong-xiao-guo.md).

# HTML快速实现平滑滚动效果

{% embed url="<https://v.douyin.com/r8NDERF/>" %}

{% embed url="<https://www.bilibili.com/video/BV1mT411w7b7/>" %}

这个A标签虽然可以实现锚点的功能

点击的时候呢也能进行跳转

但是哈有一点就是他没有这种动画

大家看

包括呢我们平时使用这个scrollTop

赋值的时候

他也是没有动画打卡

那我今天新学到两个好玩的小东西

第一个就是这个样式scroll behavior smooth

我们把它加上刷新一下大家看

这样就可以有动画了

包括我们用

代码直接修改scrollTop它也是可以的

第二个好玩的呢就是一个JS的方法

我把这个先注释掉

我们可以直接找到这个

比如说我们想跳转到A

我们把这个拿过来 const a

然后 document

query selector

我们把这个a40拿过来

好然后呢我们直接对a

哎对就是这个 （加上behavior: 'smooth'才有动画）

直接 scrollIntoView

就能实现这种效果

然后呢我把这个样式先注释掉大家看

直接通过锚点是没有动画的

但是呢通过JS的话呢

大家看 他就有动画了