在逛購物網站首頁時經常看到側邊導航欄，當我們點擊導航欄中某一項時會跳轉到當前頁面的某一處
有兩種方法實現，一種是利用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對應的部位，瀏覽器上面的頁簽有刷新顯示，關鍵是
- 定義目標位置，賦予id。
- 給a標簽添加href為#id。