scrollIntoView的用法

 

//需要让页面滑动到指定位置
//首先给元素添加id属性或其他可以获取元素的属性
//通过scrollIntoView方法实现页面跳转

document.getElementById(id).scrollIntoView({ behavior: "smooth" });

 

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 ：定义动画过渡效果，值为auto或smooth。
block ：定义垂直方向的对齐，值为start/center/end/nearest。
inline ：定义水平方向的对齐，值为start/center/end/nearest。

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