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>
