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

apple_51426592

于 2022-11-13 11:36:26 发布

阅读量1.2k

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/apple_51426592/article/details/127757503

版权

这是一个HTML页面示例，展示了如何在用户滚动页面时将导航栏设置为固定，并通过点击导航链接实现平滑滚动到相应内容区域。页面包含顶部、导航栏、四个内容区域和底部。当页面滚动超过100px时，导航栏变为固定在顶部。此外，每个导航链接点击后，页面会平滑滚动到对应的content1、content2、content3或content4区域。

摘要由CSDN通过智能技术生成

 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>