<commit_before>---
layout: post
title: 一行代码实现页面锚点滚效果
categories: [blog]
tags: [scrollIntoView, scrollTo]
description: 一行代码实现页面锚点滚效果
---


针对滚动到定位效果需求，发现有两种方法一行代码可以实现此效果

## 一、Element.scrollTo()

`Element` 的 `scrollTo()` 方法可以使界面滚动到给定元素的指定坐标位置。

### 语法： 


```js
element.scrollTo(x-coord, y-coord)
element.scrollTo(options)
```

### 参数


+ x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
+ y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。

or

+ `options` 是一个`ScrollToOptions`对象。

### 例子


```js
element.scrollTo(0, 1000);
```

使用 `options`:

```js
element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});
```

## 二、Element.scrollIntoView()

`Element` 接口的 `scrollIntoView()` 方法会滚动元素的父容器，使被调用 `scrollIntoView()` 的元素对用户可见。<commit_msg>upd: change<commit_after>---
layout: post
title: 一行代码实现页面锚点滚效果
categories: [blog]
tags: [scrollIntoView, scrollTo]
description: 一行代码实现页面锚点滚效果
---


针对滚动到定位效果需求，发现有两种方法一行代码可以实现此效果

## 一、Element.scrollTo()

`Element` 的 `scrollTo()` 方法可以使界面滚动到给定元素的指定坐标位置。

### 语法： 


```js
element.scrollTo(x-coord, y-coord)
element.scrollTo(options)
```

### 参数


+ x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
+ y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。

or

+ `options` 是一个`ScrollToOptions`对象。

### 例子


```js
element.scrollTo(0, 1000);
```

使用 `options`:

```js
element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});
```


## 二、Element.scrollIntoView()

`Element` 接口的 `scrollIntoView()` 方法会滚动元素的父容器，使被调用 `scrollIntoView()` 的元素对用户可见。
{'fraction_non_alphanumeric': 0.17197452229299362, 'fraction_numerical': 0.01556970983722576, 'mean_word_length': 5.576744186046511, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4940925', 'n_tokens_mistral': 831, 'n_tokens_neox': 837, 'n_words': 104}