實現:點擊bb按鈕,定位到a7div位置
1、第一種方式:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
<body>
<button style="position: absolute;left: 50%;top: 20%;" id="bb">bb</button>
<div id="a1" style="width: 100%;height: 500px;background-color: red"></div>
<div id="a2" style="width: 100%;height: 500px;background-color: #92D050"></div>
<div id="a3" style="width: 100%;height: 500px;background-color: #FD9727"></div>
<div id="a4" style="width: 100%;height: 500px;background-color: #33B1FC"></div>
<div id="a5" style="width: 100%;height: 500px;background-color: #3ACA31"></div>
<div id="a6" style="width: 100%;height: 500px;background-color: #FC2A36"></div>
<div id="a7" style="width: 100%;height: 500px;background-color: #999999"></div>
</body>
<script>
var btn = document.getElementById('bb')
btn.addEventListener('click',function(){
document.getElementById("a7").scrollIntoView()
},false);
</script>
</html>
2、第二種方式:
<script>
var btn = document.getElementById('bb')
btn.addEventListener('click',function(){
location.href = "#a7";
},false);
</script>
3、第三種方式:
<script>
var btn = document.getElementById('bb')
btn.addEventListener('click',function(){
document.querySelector("#7").scrollIntoView();
},false);
</script>
說明:其實這就是加錨點