<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } ul{ position: fixed; left: 0; top: 30%; } li{ height: 40px; line-height: 40px; list-style: none; width: 100px; text-align: center; background: #f01; color: #ffffff; cursor:pointer; } a{ color: #ffffff; text-decoration: none; } #a1{background: #fff;border: 1px solid #ddd; height: 900px; width: 90%; margin-left: 10%; } #a2{background: #fff;border: 1px solid #ddd; height: 900px; width: 90%; margin-left: 10%; } #a3{background: #fff;border: 1px solid #ddd; height: 900px; width: 90%; margin-left: 10%; } #a4{background: #fff;border: 1px solid #ddd; height: 900px; width: 90%; margin-left: 10%; } #a5{background: #fff;border: 1px solid #ddd; height: 900px; width: 90%; margin-left: 10%; } .active{ background: #ddd; } .active>a{ color: #000; } #LouDao{ display: none; } #main{ overflow: hidden; } </style> </head> <body> <ul id="LouDao"> <li><a>第一章</a></li> <li><a>第二章</a></li> <li><a>第三章</a></li> <li><a>第四章</a></li> <li><a>第五章</a></li> </ul> <div style="height:300px;"></div> <div id="main"> <div id="a1">1 这是一个悲惨的故事</div> <div id="a2">2 这是一个欢快的故事</div> <div id="a3">3 这是一个伤心的故事</div> <div id="a4">4 这是一个幸福的故事</div> <div id="a5">5 这是一个狗血的故事</div> </div> <footer> <div style="height: 900px; 100%">底部</div> </footer> </body> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <script> var daohang=$("#LouDao");//楼层标签 var li=$("#LouDao>li");//获取目录li var main=$("#main>div");//文章主要内容 $(window).scroll(function() { //获取到页面总高度 var HeightAll = $("html,body").height(); //获取滚动条位置 var iTop = $(window).scrollTop(); for(var i=0;i<main.length;i++){ //楼层的显示和隐藏 if(iTop>=main[0].offsetTop){ daohang.show(); }else{ daohang.hide(); }; //楼层的联动 var num=0; for(var i=0;i<main.length;i++){ if(iTop>=(main[i].offsetTop)-100){ num=i; } li[i].className='';//设置li中的class为空 //main[i].style.padding='35px 0 0 0'; }; li[num].className='active'; //main[num].style.padding='65px 0 0 0'; for(var i=0;i<li.length;i++){ li[i].onclick=function(){ for(var j=0;j<li.length;j++){ if(this==li[j]){ console.log(li[j]); var t = main.eq($(this).index()).offset().top; console.log(t); //alert(t); //$(".louti").addClass("ommm"); $("html,body").animate({ //scrollTop:main[j].offsetTop "scrollTop": t-100 },500); } } } } } }); </script> </html>