使用scrollIntoView()方法

先看示例：

### [示例](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView#%E5%8F%82%E6%95%B0)

```// 锚点

goAnchor(id) {

let maodian = document.getElementById(id).scrollIntoView();

maodian

.querySelector(selector)

.scrollIntoView({

behavior: "smooth", //动画过渡效果

block: "start", //垂直方向的对齐

inline: "start", //水平方向的对齐

});

maodian.querySelector(selector).scrollIntoView(false);

},

```

[`Element`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

## [语法](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView#%E8%AF%AD%E6%B3%95)

```

scrollIntoView()

scrollIntoView(alignToTop)

scrollIntoView(scrollIntoViewOptions)

```

Copy to Clipboard

### [参数](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView#%E5%8F%82%E6%95%B0)

- alignToTop可选

一个布尔值：

- 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。

- 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: "end", inline: "nearest"}。

- scrollIntoViewOptions 可选 实验性

一个包含下列属性的对象：

- behavior 可选

定义动画过渡效果，`auto` 或 smooth 之一。默认为 auto。

- block 可选

定义垂直方向的对齐，`start`、`center`、`end` 或 nearest 之一。默认为 start。

- inline 可选

定义水平方向的对齐，`start`、`center`、`end` 或 nearest 之一。默认为 nearest。