通常在长列表的页面中我们都会有滚动到顶部的需求，或者在聊天消息页面，当我们收到新的消息时需要主动将页面滚动到底部。针对滚动到顶部可以使用将滚动的scrollTop设置为0即可快速实现，而滚动到底部时需要根据滚动容器和内容区域的高度差设置scrollTop，当然也可以不负责任的将scrollTop设置一个不可达的理想边界值。

事实上，针对上述需求有原生的Element.scrollIntoViewAPI实现，并且有良好的兼容性，如下

因为MDN没有IE的兼容性展示，当前兼容性查询来自caniuse.com，查询显示满足全球98.83%的设备，所以当前API可放心使用。

语法

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数

alignToTop - boolean（可选）

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

scrollIntoViewOptions - { behavior?: "smooth" | "auto", block?: "start" | "center" | "end", inline?: "start" | "center" | "end"}（可选）

• behavior(可选) - 定义动画过渡效果，auto或 smooth 之一。默认为 auto
• block(可选) - 定义垂直方向的对齐方式，start, center, end或 nearest之一。默认为 "start"。
• inline(可选) - 定义水平方向的对齐方式，start, center, end或 nearest之一。默认为 "start"。

示例

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

语法以及示例摘录自MDN