为了保证在浏览的时候不影响整体的效果，我们就需要使用onePageNav，也就是页内导航
最后效果可见：http://about.phodal.com 或者http://gmszone.github.io/RESUME/
源码可见:https://github.com/gmszone/RESUME/tree/master/Web
jQuery onePageNav
项目地址:https://github.com/davist11/jQuery-One-Page-Nav
示例如下所示
<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="http://google.com" class="external">Some other link</a></li>
</ul>
$('#nav').onePageNav({
filter: ':not(.external)'
});
结合
注意:由于与timeliner发生冲突，暂时因为时间原因没有修复，所以无法达到平滑滚动效果，但是可以实现跳转
也就是说我们要把简历分为四个部分，即
- 在校情况
- 项目经历
- 其他项目、经历
- 专业技能
并且用<div id="section-$">来定义这些块。
原来的导航修改完如下
<div class="collapse navbar-collapse navbar-ex1-collapse subMenu"> <ul class="nav navbar-nav" id="top-nav"> <li href="#section-1"><a href="#">在校情况</a></li> <li ><a href="#section-2" >项目经历</a></li> <li ><a href="#section-3" >其他项目、经历</a></li> <li ><a href="#section-4" >专业技能</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">简历下载 <span class="glyphicon glyphicon-download-alt"></span> <b class="caret"></b></a> <ul class="dropdown-menu" > <li><a href="https://github.com/gmszone/RESUME/blob/master/Personal/all.pdf?raw=true">全版本</a></li> <li><a href="https://github.com/gmszone/RESUME/blob/master/Personal%20Web/web.pdf?raw=true">web专用</a></li> <li><a href="https://github.com/gmszone/RESUME/blob/master/Personal%20Embeded/Embeded.pdf?raw=true">嵌入式专用</a></li> <li><a href="https://github.com/gmszone/RESUME/blob/master/word/Phodal%20Huang.docx?raw=true">Word</a></li> </ul> </li> </ul> <form name="search-highlight" id="search-highlight" method="post" action="#" class="navbar-form navbar-right" role="search"> <input name="term" id="term" class="text form-control2" placeholder="页面内搜索"/> <input type="submit" name="submit" id="submit" class="btn btn-info" value="搜索" /> </form> </div><!-- /.navbar-collapse -->
最后再用div就OK了。