jquery 跳转到当前页面指定位置

本文介绍: 这是顶部，高度为100px

 1 &lt;!DOCTYPE html&gt;
 2 &lt;html lang="en"&gt;
 3 &lt;head&gt;
 4     &lt;meta charset="UTF-8"&gt;
 5     &lt;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>