手机端滚动至页面指定位置

scrollIntoViewOptions是非常有用的，但是目前只有Chrome和FireFox可以支持，但是可以通过其他插件实现（smoothscroll-polyfill）

示例

document.getElementById('content').scrollIntoView({
	block: 'start',
	inline: 'nearest',
	behavior: 'smooth'
})

文档

第一种方案：方法参数传 “alignToTop”

目前之前这个参数得到了良好的支持

 

scrollIntoView(alignToTop); // Boolean parameter

alignToTop
一个Boolean值：

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

 true :元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"} 这是默认值
 false：元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。

使用

document.getElementById('content').scrollIntoView(true);

---

第二种方案（如示例）：方法参数传 “scrollIntoViewOptions”

目前这个参数浏览器对它的支持并不好，可以查看下文兼容性

element.scrollIntoView(scrollIntoViewOptions); // Object parameter

behavior： [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。

block ：[可选] "start"（顶部），"center"（居中），"end"（尾部） 或"nearest"。默认为"center"。 

inline：[可选] "start"，"center"，"end"或"nearest"。默认为"nearest"。

使用

document.getElementById('content').scrollIntoView({
    block: 'start',
    inline: 'nearest',
    behavior: 'smooth'
})

---

参考

http://mssn.midea.com/ask/?/article/230

https://zhuanlan.zhihu.com/p/342205449