1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding:0;margin:0;} 8 .top{ width:100%; height:100px; text-align: center; line-height: 100px;} 9 .nav{ width:100%; height:100px;} 10 .nav ul{width:100%; list-style: none;} 11 .nav ul li { float:left; line-height:100px; 12 text-align: center; width:25%; background:#0095cd;} 13 .fixed {position:fixed; top:0px;} 14 .cont1,.cont2,.cont3,.cont4{width:100%;height:400px; color:#fff;} 15 .cont1 {background:#00678e; text-align:center; line-height: 400px;} 16 .cont2 {background:#0F3A56; text-align:center; line-height: 400px;} 17 .cont3 {background:#33bbee; text-align:center; line-height: 400px;} 18 .cont4 {background:#7ca1f8; text-align:center; line-height: 400px;} 19 .footer { background:#68767b; text-align:center;line-height:200px;} 20 </style> 21 <script src="style/js/jquery-1.8.3.min.js"></script> 22 <script> 23 $(function(){ 24 $(window).scroll(function(){ 25 if ($(window).scrollTop() >= 100) { 26 $('.nav').addClass('fixed'); 27 } else { 28 $('.nav').removeClass('fixed'); 29 } 30 }) 31 var _li = $('.nav').find('li'); 32 _li.each(function(){ 33 var index = $(this).index(); 34 $(this).find('a').click(function(){ 35 var len = index-1; 36 var numTop = getHeight(len); 37 $('html,body').animate({scrollTop: numTop + "px"},300); 38 }) 39 }) 40 }) 41 function getHeight(index) { 42 var heightall = 0; 43 for(i=0;i<=index;i++){ 44 heightall += 400; 45 } 46 return heightall; 47 } 48 </script> 49 </head> 50 <body> 51 <div class="top">这是顶部，高度为100px</div> 52 <div class="nav"> 53 <ul> 54 <li><a>first</a></li> 55 <li><a>scond</a></li> 56 <li><a>third</a></li> 57 <li><a>four</a></li> 58 </ul> 59 </div> 60 <div class="cont1">this is content1</div> 61 <div class="cont2">this is content2</div> 62 <div class="cont3">this is content3</div> 63 <div class="cont4">this is content4</div> 64 <div class="footer">this is footer</div> 65 </body> 66 </html>