页面滚动到某个元素

在某些应用场景中，需要我们点击某个地方把页面滚动到某处。通常我们会使用 js 去计算摇滚动到的地方距离页面顶部的距离，然后使用document.scrollTop = xxx来控制页面的滚动距离。

在页面结构比较简单的时候，这个距离比较好计算，但是当页面结构很复杂的时候，距离的计算就比较复杂了。

在 Web API 中存在两个很实用的方法可以快速帮我们实现这个需求，它们就是scrollIntoView与 scrollIntoViewIfNeeded。

scrollIntoView

它的使用方法为element.scrollIntoView()，将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但是这个 API 在可见区域内的元素也是可以滚动的。

在说怎么使用之前，先来看看他的浏览器兼容性：

从图中可以看出兼容性一片良好，除了个别属性不支持外，基本上是可以放心的使用了。

它的参数有两种类型：Boolean 类型和 Object 类型。

当参数为 Boolean 类型时：

• 当为true时，元素的顶端将和其所在滚动区的可视区域的顶端对齐
• 当为false时，元素的底端将和其所在滚动区的可视区域的底端对齐

const element = document.querySelector(selector);
element.scrollIntoView(true);

当参数为 Object 类型时：

• block 字段与 Boolean 类型一样，取值为更加形象的 start 和 end
• behavior 字段控制过渡的动画，取值为 auto 或 instant 或 smooth

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

element.scrollIntoView(true)与element.scrollIntoView({block: 'start'})效果是一样的。

behavior 字段控制过渡的动画，当取值为auto或instant时，效果都是一样的，页面会瞬间跳到指定的元素处。当取值为smooth时，页面会平滑的滚动到指定的元素处，但是除了 Chrome 和 Firefox 外其他浏览器不支持这个属性。

scrollIntoViewIfNeeded

使用方法与scrollIntoViewAPI 相同，也是将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域，但是元素在可见区域内该方法则不会有任何效果。

首先还是来看看它的兼容性是怎样：

从图中可以看出这个 API 目前只有 webkit 内核的浏览器才支持。如果是在移动端，那就可以放心的使用了。

参数只有 Boolean 类型：

• 当为true时，让元素在可视区域中居中对齐
• 当为false时，元素可能顶部或底部对齐，视乎元素靠哪一边更近

const element = document.querySelector(selector);
element.scrollIntoViewIfNeeded(true);