如何滚动到特定位置？scrollIntoView了解一下

前言

平常开发中，我们会遇到某些场景，比如说我浏览的页面滚动到了的某个特定位置，下一次浏览还需要保留在原来位置。

通常我们缓存当前浏览滚动的高度，那么跳转到特定的位置我们介绍几种常用的方式。

1. 常用跳转方式

假设我们有一个具有 id 为 "container" 的容器元素，滚动到100px处：

1.1 使用 scrollTop属性

具体代码：

var container = document.getElementById("container");
container.scrollTop = 100;

1.2 使用 scrollBy 方法：

该方法接受两个参数，分别表示水平和垂直滚动的像素数。

具体代码：

var container = document.getElementById("container");
container.scrollBy(0, 100);

1.3 使用 scrollTo 方法

类似于 scrollBy 方法，scrollTo 方法可以用于滚动元素到指定的位置。不同之处在于，scrollTo 方法接受绝对的滚动位置而不是相对位置。

具体代码：

var container = document.getElementById("container");
container.scrollTo(0, 500);

1.4 使用id锚点链接跳转

具体代码：

<a href="#target-id">跳转到目标</a>

<div id="target-id">
  <!-- 目标内容 -->
</div>

缺点是：需要唯一的id，且url地址栏有hash，会导致路由框架跳转错误。

2. scrollIntoView

介绍一个非常好用的前端API---scrollintoView,可以方便地让页面元素滚动到可视区域。

2.1 属性介绍

• behavior 定义滚动是立即的还是平滑的动画。

  • smooth：滚动应该是平滑的动画。
  • instant：滚动应该通过一次跳跃立刻发生。
  • auto：滚动行为由 scroll-behavior 的计算值决定。

• block 定义垂直方向的对齐，默认为 start

  • start
  • center
  • end
  • nearest

• inline 定义水平方向的对齐，默认为 nearest

  • start
  • center
  • end
  • nearest

2.2 案例

例如：获取到某个元素的dom节点，以任意页面为例，通过当前元素的$0进行调用

单纯调用： 添加属性调用，比如block为center,则居中显示:

2.3 应用场景

它可以应用于各种不同的场景，例如以下几个：

1. 导航菜单：当用户点击导航菜单中的链接时，可以使用 scrollIntoView 将页面滚动到相应的部分。

2. 页面内锚点链接：当页面内存在锚点链接时，可以使用 scrollIntoView 将页面滚动到对应的位置。

3. 滚动加载：在一些需要滚动加载内容的情况下，当用户滚动到页面底部时，可以使用 scrollIntoView 将新加载的内容滚动到视图中。

4. 表单验证：当用户提交表单时，如果发现输入错误，可以使用 scrollIntoView 将错误的输入字段滚动到可视区域内，以便用户直接看到并修改错误。

4. 总结

本文介绍了常用滚动到特定位置的一些方法属性。 主要说明如何使用scrolllntoView API来将页面元素滚动到可视范围内，详细说明该API的使用方法和配置选项以及应用场景。

注意：该方法不仅适用于整个网页的滚动，也可以用于任何一个区域的滚动。

单纯记录，不喜勿喷。如果错误，请指正O^O!