单页面导航插件，就是当你点击导航条或者侧边导航的时候，页面会自动上下移动到你所点击的内容区域。 用Bootstrap写响应式导航条时在小屏幕下会显示汉堡菜单，当我们点击汉堡菜单中的子菜单后，如何自动向上收缩汉堡菜单呢？看3.js中第二段点击隐藏汉堡菜单。

下载插件：http://download.csdn.net/detail/erdouzhang/9775622

1. html页面引入插件

在index.html页面引入jquery.singlePageNav.min.js插件。

<script src="lib/jquery.singlePageNav.min.js"></script>

2.找到导航条ul列表中的nav

我的导航条是类.nav,也可以给ul添加一个id值id="nav"。

<nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">导航</a> </div> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </div> </nav>

3.js

给nav添加js即：.singlePageNav() 导航条高70px,即向下偏移70px.

$(function(){ // 导航跳转效果插件 $('.nav').singlePageNav({ offset:70 }); // 小屏幕下点击子菜单后隐藏汉堡菜单 $('.navbar-collapse a').click(function(){ $('.navbar-collapse').collapse('hide'); }); });