Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.1
 立即下载

锚点定位 跳转

使用说明:

1,该功能用纯jQuery代码编写,(模拟html中 a标签 的锚点跳转定位<a href="跳转定位元素的id"> 锚点 </a>)。

2,适用于单页面位置跳转定位。

3,使用jQuery中的animate方法,使锚点,定位同时都有测动和跳转动画效果。

0