Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內
element.scrollIntoView(); // 等同於element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型參數 true 元素的頂端與可視區域頂端對齊，（相當於{block: "start"}） false 元素底端將與可視區域底端對齊（相當於{block: "end"}） element.scrollIntoView(scrollIntoViewOptions); // Object型參數 behavior: "auto" | "instant" | "smooth"，behavior這個選項決定頁面是如何滾動的，auto與instant都是瞬間跳到相應的位置，而smooth就是有動畫的過程；block:"start" | "end"
===================================================================
element.scrollIntoView() 方法不但可以引起頁面的垂直滾動，也可以引起頁面的水平滾動，這個是合理的
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div { height: 1500px; width: 150%; background: #ddd; margin: 20px auto; border: 1px solid #aaa; }
p { position: relative; }
#link { position: absolute; right: -200px; }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<p><a id="link">aaaa</a>占位符占位符占位符</p>
<div id="div3"></div>
<script>
function aaa() {
var element = document.getElementById("link");
element.scrollIntoView({ block: "end", behavior: "smooth" });
}
setTimeout(function () {
aaa();
}, 2000)
</script>
</body>
</html>
效果如下
另外，element.scrollIntoView()還會引起一些看似詭異但情理上說的過去的現象，比如 element是不可見的，將element放到overflow:hiden的容器或者將element設置為visibility: hidden;會改變原有布局
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div { height: 1500px; width: 150%; background: #ddd; margin: 20px auto; border: 1px solid #aaa; }
p { white-space: nowrap; width: 200px; text-overflow: ellipsis; overflow: hidden; }
#link { visibility: hidden; }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<p>
占位符占位符占位符占位符<a id="link">aaaa</a>占位符占位符占位符
</p>
<div id="div3"></div>
<script>
function aaa() {
var element = document.getElementById("link");
element.scrollIntoView({ block: "end", behavior: "smooth" });
}
setTimeout(function () {
aaa();
}, 2000)
</script>
</body>
</html>
初始狀態 #link在這個位置
scrollIntoView之后
當我們改變容器的寬度再改回來，樣式又恢復了
參考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
https://www.jianshu.com/p/32bef36a68a0