<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.div1{
width: 90%;
margin: 0 auto;
height: 700px;
background: red;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.div2{
width: 90%;
margin: 0 auto;
height: 700px;
background: pink;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.div3{
width: 90%;
margin: 0 auto;
height: 700px;
background: green;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.div4{
width: 90%;
margin: 0 auto;
height: 700px;
background: blue;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.nav{
width: 80px;
height: 204px;
position: fixed;
right: 20px;
bottom: 40px;
background: #b6b6b6;
}
.nav li{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
cursor: pointer;
border-top: 1px solid #b6b6b6;
}
</style>
</head>
<body>
<ul class="nav">
<li>div1</li>
<li>div2</li>
<li>div3</li>
<li>div4</li>
</ul>
<div class="div1">我是DIV1</div>
<div class="div2">我是DIV2</div>
<div class="div3">我是DIV3</div>
<div class="div4">我是DIV4</div>
</body>
<script src="../jquery.2.2.4.js"></script>
<script>
$(".nav").children("li").click(function(){
// 获取点击元素的索引
// console.log($(this).index())
// 根据索引，拿到对应的div
// console.log($("div").eq($(this).index()))
// 根据div获取自己的距离顶部的距离
// console.log($("div").eq($(this).index()).offset().top)
// 无动画版
// 设置给document的scrollTop
// $(document).scrollTop($("div").eq($(this).index()).offset().top)
// 动画版
$("html").animate({
scrollTop:$("div").eq($(this).index()).offset().top
})
})
</script>
</html>
