1、Element.scrollIntoView()
该方法让当前元素滚动到浏览器窗口的可是区域内；
2、语法:
element.scrollIntoView();//等同于element.scrolIntoView(true)
element.scrollIntoView(alignToTop);//Boolean型参数
element.scrollIntoView(scrollIntoViewOptions);//Object型参数 参数
alignToTop:true--- 元素的顶端和器所在滚动区的可视区域顶端对齐
true 相当于{block:start}
false--- 元素的底端将和其所在滚动区的可视区域底端对齐
false 相当于{block:end}
scrollIntoViewOptions：一个boolean值或一个带有选项的object
{
behavior:'auto' | 'instant'|'smooth',
block:'start' | 'end'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollToView的学习</title>
<style>
#containers{
background-color: black;
width:300px;
height:50px;
display: flex;
justify-content: space-around;
position: fixed;
left:42.1%;
}
.clear{
height:50px;
}
.title{
color: #ffffff;
}
#title1-item,#title2-item,#title3-item{
width:300px;
height:800px;
border:1px solid #dddddd;
margin: auto;
margin-bottom: 20px;
box-sizing: border-box;
padding-top: 50px;
}
</style>
</head>
<body>
<div id="containers">
<div data-target="#title1-item" class="title">商品</div>
<div data-target="#title2-item" class="title">详情</div>
<div data-target="#title3-item" class="title">评价</div>
</div>
<div class="clear"></div>
<div id="title1-item">商品对应的部分</div>
<div id="title2-item">详情对应的部分</div>
<div id="title3-item">评价对应的部分</div>
<script type="text/javascript">
var aHref = document.getElementsByClassName('title');
var title1Item = document.getElementById('title1-item');
var title2Item = document.getElementById('title2-item');
var title3Item = document.getElementById('title3-item');
console.log(aHref[0]);
aHref[0].onclick=function(){
title1Item.scrollIntoView(true); };
aHref[1].onclick=function(){
title2Item.scrollIntoView(false); };
aHref[2].onclick=function(){
title3Item.scrollIntoView();
}
</script>
</body>
</html>
3、浏览器支持
scrollIntoViewOptions IE浏览器，Safari 不支持
IE8版本以下，Safari 5.0版本以下 不支持 "smooth" 属性 和 "center" 设置项.
Firefox 36 不支持 "inline" 设置项。不支持设置项的值 "nearest" 或 "center"。
移动端：
scrollIntoViewOptions 会有一些低配版本的手机不支持