jQuery的单页面滚动导航设计插件

收藏

一个轻量级的jQuery的单页网站导航插件。单击菜单后平滑滚动导航对应的导航项。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

载入<a href="http://www.sucainiu.com/jquery.html">js</a>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.min.js"></script>

html 如下

<ul id="nav">
		<li class="current"><a href="#section-1">Section 1</a></li>
		<li><a href="#section-2">Section 2</a></li>
		<li><a href="#section-3">Section 3</a></li>
		<li><a href="#section-4">Section 4</a></li>
		<li><a href="#section-5">Section 5</a></li>
		<li><a href="demo1.html" class="external">查看演示二</a></li>
	</ul>


<div class="section" id="section-1">
    <strong>Section 1</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, .</p>
</div>

<div class="section" id="section-2">
    <strong>Section 1</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, .</p>
</div>

调用插件

<script type="text/javascript">
$(document).ready(function(){

	$('#nav').onePageNav({
		filter: ':not(.external)',
		scrollThreshold: 0.25
	}); 

});
</script>

示例默认值:

$('#nav').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
});