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"});