定位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方法,使锚点,定位同时都有测动和跳转动画效果。