Element.scrollIntoView()
直接上例子代碼給大家一點參考:
<html>
<style>
span {
display: block;
height: 150%;
} /*整點上下的空白 */
</style>
<body>
<button id="from">點擊我</button>
<span></span>
<div id="to">滾動到這:頭條@plzbefat</div>
<span></span>
</body>
<script>
document.getElementById("from").addEventListener("click", () => {
document.getElementById("to").scrollIntoView({
behavior: "smooth", //順滑的滾動
});
});
</script>
</html>
整點例子沒毛病
語法
element.scrollIntoView(); // 等同於element.scrollIntoView(true) 滾動 元素在頂部
element.scrollIntoView(false); // 滾動 元素在底部
element.scrollIntoView(option); //參數參數
alignToTop:
如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。這是這個參數的默認值。
如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
scrollIntoViewOptions:
behavior 可選
定義動畫過渡效果， “auto”或 “smooth” 之一。默認為 “auto”。
block 可選
定義垂直方向的對齊， “start”, “center”, “end”, 或 “nearest”之一。默認為 “start”。
inline 可選
定義水平方向的對齊， “start”, “center”, “end”, 或 “nearest”之一。默認為 “nearest”。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/234473.html
微信掃一掃 
支付寶掃一掃 