singlePageNav.min.js单页面导航插件
用于优化导航效果，使锚点链接不在很生硬，达到平滑过渡的效果，优化用户体验
下载地址
singlePageNav.min.js
1.使用方法
引入jquery和singPageNav.min.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.singlePageNav.min.js'></script>
2.选择导航容器调用singlePageNav()方法
$('nav').singlePageNav();
3.参数 以对象形式
{offset:80}:隐藏当前元素80的高度
$('nav').singlePageNav({
offset:50,
})
4.完整demo
<!DOCTYPE html>
<html>
<head>
<title>导航效果</title>
<style type="text/css">
body{
height:2000px;
}
nav{
width:400px;
height:50px;
background: #eee;
position: fixed;
top:0;
}
li{
list-style: none;
float:left;
line-height: 50px;
}
li a {
color:#888;
text-decoration: none;
padding: 0 10px;
}
div {
width:300px;
height:520px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#id1">导航一</a></li>
<li><a href="#id2">导航二</a></li>
<li><a href="#id3">导航三</a></li>
<li><a href="#id4">导航四</a></li>
<li><a href="#id5">导航五</a></li>
</ul>
</nav>
<section>
<div id='id1'>导航一内容</div>
<div id='id2'>导航二内容</div>
<div id='id3'>导航三内容</div>
<div id='id4'>导航四内容</div>
<div id='id5'>导航五内容</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.singlePageNav.min.js'></script>
<script type="text/javascript">
//优化导航效果
$(function(){
// $('nav').singlePageNav();
//传递参数
$('nav').singlePageNav({
offset:50,
})
})
</script>
</body>
</html>
