JS控制div跳轉到指定的位置的解決方案3(用js的srollIntoView方法進行使用)
阿新 • • 發佈：2020-08-05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件標題</title>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
#container{
position: fixed;
margin:50px 500px;
}
</style>
</head>
<ul>
<li><a href="javascript:;" data-tab="eat">吃飯</a></li>
<li><a href="javascript:;" data-tab="sleep">睡覺</a></li>
<li><a href="javascript:;" data-tab="walk">逛街</a></li>
</ul>
<div >
<div data-tab="eat" style="background:cyan; height:500px;">
</div>
<div data-tab="sleep" style="background:lightgreen;height:2000px;">
睡覺
</div>
<div data-tab="walk" style="background:LightSalmon;height:1000px;">
逛街
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
[].slice.call(document.querySelectorAll('a')).forEach(function(el){
el.addEventListener('click', function(){
var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
target.scrollIntoView(true);
})
})
</script>
</html>
注意一個問題，object.scrollIntoView(bool),前面是物件，通常原生的獲取物件都是下面的寫法：
document.getElementById('#xxx').scrollIntoView(true);
那麼如果用jquery來呼叫該方法的話，需要寫成下面這樣的：
$('#xxx')[0].scrollIntoView(true);