在逛购物网站首页时经常看到侧边导航栏，当我们点击导航栏中某一项时会跳转到当前页面的某一处
有两种方法实现，一种是利用js计算好各位置的高度，通过绑定事件使页面跳转到指定位置，另一种是利用a标签进行当前页面不同部位跳转
方法1、js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.8.3/jquery.min.js"></script>
<script src="js/introduction.js"></script>
<link rel="stylesheet" href="css/induction.css">
</head>
<body>
<div class="container">
<div class="head">head</div>
<div class="content">
<div class="box">天猫超市</div>
<div class="box">天猫国际</div>
<div class="box">美丽人生</div>
<div class="box">潮店酷玩</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">户外出行</div>
<div class="box">猜你喜欢</div>
</div>
<div class="side">
<div class="left-side">导航</div>
<div class="left-side">天猫超市</div>
<div class="left-side">天猫国际</div>
<div class="left-side">美丽人生</div>
<div class="left-side">潮店酷玩</div>
<div class="left-side">居家生活</div>
<div class="left-side">打造爱巢</div>
<div class="left-side">户外出行</div>
<div class="left-side">猜你喜欢</div>
<div id="goTop" class="left-side">顶部</div>
</div>
</div>
</body>
</html> body{margin:0;}
.box{
height: 300px;
width:600px;
margin:0 auto;
/*border:1px solid #000;*/
background-color: #dc90e4;
}
.head{
width: 600px;
height:600px;
margin:0 auto;
background-color: #fddda0;
}
.side{
display:none;
position:fixed;
top:150px;
font-size:12px;
font-family:"PingFang SC";
font-weight:400;
}
.left-side{
box-sizing:content-box;
width: 30px;
height: 30px;
margin-top:1px;
text-align: center;
padding:5px;
background-color: #ddd; } $(function(){
var tp,inx;
$(window).scroll(function(){
tp=$(window).scrollTop();
if(tp>=200){
$(".side").fadeIn(1000,function(){
$(this).show();
});
}else{ $(".side").fadeOut(1000,function(){
$(this).hide();
});
}
});
$("#goTop").on("click",function(){
$("html").animate({scrollTop:0},1000)
return false
});
$(".left-side").click(function(){
inx=$(this).index();
if(inx>0&&inx<9){
$("html").animate({scrollTop:(600+(inx-1)*300+"px")},1000); }
});
});
只是简单的写一下原理
方法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。