element.scrollIntoView

有一个常见的需求是：把页面滚动到某一个元素处。

我一直以来的做法都是计算处该元素在页面的位置，然后设置 documentElement 的 scrollTop 或用 window.scrollTo(x, y) 来实现。

发现 DOM API 中有着一个简单的方法，并且兼容包括 IE6 等主流浏览器，那就是 element.scrollIntoView(alignWithtop) 。

从命名可知，是把对应元素滚入可视范围，可带一参数，参数类型是 boolean，true 时表示元素顶部和滚动区域的顶部对齐，false 时元素底部和滚动区域底部对齐，不带该参数和 true 的效果一致。

关于对齐，说的自然是尽可能对齐，当无法再滚时，不会拉伸页面来强行对齐。

上面用「滚动区域」而不是窗口来表述对齐，说的是不单对整个页面的滚动可用，也对页面别的有滚动条的元素生效。当对某一元素应用该方法时，从最内层的滚动区域开始调整 scrollTop，没进入可视范围，再继续调整外层滚动区域的 scrollTop 。

一个 demo

References

• element.scrollIntoView in MDN
• scrollIntoView method in MSDN