在逛购物网站首页时经常看到侧边导航栏，当我们点击导航栏中某一项时会跳转到当前页面的某一处
有两种方法实现，一种是利用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 600px; 43 margin:0 auto; 44 /*border:1px solid #000;*/ 45 background-color: #dc90e4; 46 } 47 .head{ 48 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 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{
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对应的部位，浏览器上面的页签有刷新显示，关键是
- 定义目标位置，赋予id。
- 给a标签添加href为#id。