定位1
定位2
定位3
定位4
定位5
定位6
.nav {
position:fixed;
top:0px;
left:0px;
display:flex;
width:100%;
height:50px;
background-color:darkgray;
}
.nav .menu {
position:relative;
flex:1;
text-align:center;
line-height:50px;
cursor:pointer;
}
.nav .menu:hover {
background-color:#0000FF;
color:white;
}
.nav .menu.active {
color:white;
}
.nav .bar {
position:absolute;
top:0;
left:0;
width:16.6666%;
height:50px;
background-color:#0000FF;
}
.main .box {
margin-top:50px;
width:100%;
height:800px;
line-height:400px;
font-size:36px;
font-weight:bold;
color:#0000FF;
text-align:center;
border:1px solid black;
}
1,该功能用纯jQuery代码编写,(模拟html中 a标签 的锚点跳转定位<a href="跳转定位元素的id"> 锚点 </a>)。
2,适用于单页面位置跳转定位。
3,使用jQuery中的animate方法,使锚点,定位同时都有测动和跳转动画效果。