<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
.list_li{ position: fixed; left: 20px; top: 50%;list-style: none;}
.list_li li{ 20px; height: 20px; border: 1px solid red; }
</style>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
$(".list_li").hide();//先让li列表隐藏
var headTop =$(".head").outerHeight() ;//获取1楼的高度
$(window).scroll(function(){
if( $(window).scrollTop() >= headTop )//判断如果滚动的高度大于1楼的高度 li列表显示
{
$(".list_li").show(500);
}
})
//跳楼
$(".list_li >li").click(function(){
var index = $(this).index();//取到对应li的下标
var oTop = $("div").eq(index).offset().top;//每个对应div 距离顶部的高度
$("body").animate({scrollTop:oTop},1000)//控制body滚动动画
})
})
</script>
</head>
<body>
<div class="head" style="height: 400px; 800px; margin: 0 auto; background: red;">一楼</div>
<div class="head2" style="height: 200px; 800px; margin: 0 auto; background: blue;">二楼</div>
<div style="height: 300px; 800px; margin: 0 auto; background: pink;">三楼</div>
<div style="height: 500px; 800px; margin: 0 auto; background: green;">四楼</div>
<div style="height: 100px; 800px; margin: 0 auto; background: blueviolet;">五楼</div>
<div style="height: 700px; 800px; margin: 0 auto; background: orange;">六楼</div>
<div style="height: 300px; 800px; margin: 0 auto; background: palegreen;">七楼</div>
<div style="height: 900px; 800px; margin: 0 auto; background: saddlebrown;">八楼</div>
<div style="height: 600px; 800px; margin: 0 auto; background: darkblue;">九楼</div>
<ul class="list_li">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
<li>9F</li>
</ul>
</body>
</html>