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

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

载入<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
    }
});