# 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的话呢

大家看 他就有动画了


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/html-kuai-su-shi-xian-ping-hua-gun-dong-xiao-guo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.