前情
在前端開發需求中，經常需要用到錨點功能，以往都是獲取元素在滾動容器中的位置再設置scrollTop來實現的。
scrollIntoView介紹
scrollIntoView()方法將調用它的元素滾動到瀏覽器窗口的可見區域
調用方式：
var element = document.getElementById("test");
element.scrollIntoView（）; // 等同於element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布爾參數
element.scrollIntoView（scrollIntoViewOptions）; //對象參數
alignToTop參數說明：
| alignToTop | [可選]，目前之前這個參數得到了良好的支持 |
|---|---|
| true(默認值) | 元素的頂部將對齊到可滾動祖先的可見區域的頂部。對應於scrollIntoViewOptions: {block: "start", inline: "nearest"}。 |
| false | 元素的底部將與可滾動祖先的可見區域的底部對齊。對應於scrollIntoViewOptions: {block: "end", inline: "nearest"}。 |
scrollIntoViewOptions參數說明：
| scrollIntoViewOptions | [可選]，目前這個參數瀏覽器對它的支持並不好 |
|---|---|
| behavior | [可選]定義過渡動畫。"auto","instant"或"smooth"。默認爲"auto" |
| block | [可選] "start"，"center"，"end"或"nearest"。默認爲"center" |
| inline | [可選] "start"，"center"，"end"或"nearest"。默認爲"nearest" |
元素可能無法完全滾動到頂端或底端，例如滾動區域不夠滾的時候則無法滾動到頂端
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 300px;
overflow-x: hidden;
overflow-y:auto;
}
.item{
width：100%;
height: 100px;
line-height: 100px;
margin-bottom: 10px;
text-align: center;
color: #fff;
background-color: green;
}
.button{
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">第1條</div>
<div class="item">第2條</div>
<div class="item">第3條</div>
<div class="item">第4條</div>
<div class="item">第5條</div>
<div class="item">第6條</div>
<div class="item">第7條</div>
</div>
<button class="button">跳轉到第1條</button>
<button class="button">跳轉到第5條</button>
<script>
var items = document.querySelectorAll('.item');
var button = document.querySelectorAll('.button');
button[0].addEventListener('click', function(){
items[0].scrollIntoView();
}, false);
button[1].addEventListener('click', function(){
items[4].scrollIntoView();
}, false);
</script>
</body>
</html>