在逛购物网站首页时经常看到侧边导航栏，当我们点击导航栏中某一项时会跳转到当前页面的某一处

有两种方法实现，一种是利用js计算好各位置的高度，通过绑定事件使页面跳转到指定位置，另一种是利用a标签进行当前页面不同部位跳转

方法1、js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../jquery-1.8.3/jquery.min.js"></script>
 7     <script src="js/introduction.js"></script>
 8     <link rel="stylesheet" href="css/induction.css">
 9 </head>
10 <body>
11 <div class="container">
12     <div class="head">head</div>
13     <div class="content">
14         <div class="box">天猫超市</div>
15         <div class="box">天猫国际</div>
16         <div class="box">美丽人生</div>
17         <div class="box">潮店酷玩</div>
18         <div class="box">5</div>
19         <div class="box">6</div>
20         <div class="box">户外出行</div>
21         <div class="box">猜你喜欢</div>
22     </div>
23     <div class="side">
24         <div class="left-side">导航</div>
25         <div class="left-side">天猫超市</div>
26         <div class="left-side">天猫国际</div>
27         <div class="left-side">美丽人生</div>
28         <div class="left-side">潮店酷玩</div>
29         <div class="left-side">居家生活</div>
30         <div class="left-side">打造爱巢</div>
31         <div class="left-side">户外出行</div>
32         <div class="left-side">猜你喜欢</div>
33         <div id="goTop" class="left-side">顶部</div>
34     </div>
35 </div>
36 </body>
37 </html>
38 
39 body{margin:0;}
40 .box{
41     height: 300px;
42     width:600px;
43     margin:0 auto;
44     /*border:1px solid #000;*/
45     background-color: #dc90e4;
46 }
47 .head{
48     width: 600px;
49     height:600px;
50     margin:0 auto;
51     background-color: #fddda0;
52 }
53 .side{
54     display:none;
55     position:fixed;
56     top:150px;
57     font-size:12px;
58     font-family:"PingFang SC";
59     font-weight:400;
60 }
61 .left-side{
62     box-sizing:content-box;
63     width: 30px;
64     height: 30px;
65     margin-top:1px;
66     text-align: center;
67     padding:5px;
68     background-color: #ddd;
69 
70 }
71 
72 $(function(){
73     var tp,inx;
74     $(window).scroll(function(){
75          tp=$(window).scrollTop();
77         if(tp>=200){
78             $(".side").fadeIn(1000,function(){
79                 $(this).show();
80             });
81         }else{
82 
83             $(".side").fadeOut(1000,function(){
84                 $(this).hide();
85             });
86         }
87     });
88     $("#goTop").on("click",function(){
89         $("html").animate({scrollTop:0},1000)
90         return false
91     });
92     $(".left-side").click(function(){
93         inx=$(this).index();
94         if(inx>0&&inx<9){
95         $("html").animate({scrollTop:(600+(inx-1)*300+"px")},1000);97         }
98     });
99 });

只是简单的写一下原理

方法2、a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.8.3/jquery.min.js"></script>
    <script>
        $(function(){
        $(".container div").height($(window).height());
        })
    </script>
    <style>
        .container div{
            width: 600px;
            margin:0 auto;
        }
        .container div:nth-child(odd){
            background-color: #dc90e4;
        }
        .container div:nth-child(even){
            background-color: #fddda0;
        }
        .side{
            position:fixed;
            top:150px;
        }
        a{
            display:block;
            text-decoration: none;
        }
        a:hover{
            color:green;
        }
        a:active{
            color:red;
        }
        a:link{
            color:yellow;
        }
        a:visited{
            color:cyan;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
    <div id="box6">box6</div>
    <div id="box7">box7</div>
    <div id="box8">box8</div>
</div>
<div class="side">
    <a href="jump-page.html#box1">box1</a>
    <a href="jump-page.html#box2">box2</a>
    <a href="jump-page.html#box3">box3</a>
    <a href="jump-page.html#box4">box4</a>
    <a href="jump-page.html#box5">box5</a>
    <a href="jump-page.html#box6">box6</a>
    <a href="jump-page.html#box7">box7</a>
    <a href="jump-page.html#box8">box8</a>
</div>
</body>
</html>

方法1实现的具有滚动效果，也是网站中最常用的

1、利用jquery中的scrollTop()方法获取匹配元素相对滚动条顶部的偏移。

2、修改匹配元素的scrollTop属性值

方法2在实现时触发了a标签 ，但仍跳转到当前页面的与a标签中的id对应的部位，浏览器上面的页签有刷新显示，关键是

  1. 定义目标位置，赋予id。
  2. 给a标签添加href为#id。

版权声明：本文为aniu-caili原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/aniu-caili/p/9437262.html