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

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

淘建站为您提供更多_导航菜单_滚动菜单_整屏翻页效果_滚动菜单，在此特别感谢您对我们的支持与厚爱！

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