效果图:点击左边导航,右边内容滚动到相对应区域
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{margin: 0;padding: 0;}
body{background-color: #ccc;}
.container{width: 1000px;margin: 0 auto;overflow: hidden;}
.left{width: 200px;float: left;height: auto;padding: 20px 0;}
.left .item{width: 100%;height: 60px;line-height: 60px;list-style-type: none;text-align: center;background-color: #fff;margin-bottom: 10px;cursor: pointer;}
.left .active{background-color: cyan;color: white;}
.right{width: 760px;height: 400px;min-height: 800px;float:left;margin-left: 40px;background-color: white;overflow: scroll;padding-top: 25px;}
.right .box{height: 500px;line-height: 500px;text-align: center;font-size: 32px;color: white;}
.right .box1{background-color: antiquewhite;}
.right .box2{background-color: rebeccapurple;}
.right .box3{background-color: aquamarine;}
.right .box4{background-color: sienna;}
.right .box5{background-color: darkgoldenrod;}
</style>
<body>
<div class="container">
<ul class="left" id="left-box">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<div class="right" id="right-box">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$("#left-box").on("click",'.item',function(){
var index = $(this).index();
scrollToLocation(index);
});
function scrollToLocation(index) {
index = parseInt(index);
var mainContainer = $('#right-box');
var scrollToContainer = mainContainer.find('.box').eq(index);
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 200);
}
</script>
</html>