1. 导航和内容的父元素div有overflow
<html> <header> <title>bootstrap scrollspy</title> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> <style> .body{margin: 0 auto;height:200px;overflow-y:auto;} .bs-docs-sidebar{position:fixed;left:0;top:0;} .active a{color:red;} </style> </header> <!-- 给需要监视的页面元素添加 data-spy="scroll" – 一般是 body 元素，并且通过 data-target 属性指定目标 data-target 属性指向的是 class 为 bs-docs-sidebar 的 div 块。 $('.bs-docs-sidebar').scrollspy(); --> <body data-spy="scroll" data-target=".bs-docs-sidebar"> <!--监控的导航部分 HTML 代码 ul 含有一个 CSS 类 .nav，它是必需的--> <div class="bs-docs-sidebar"> <ul class="nav"> <li><a href="#one">hello Bootstrp 3</a></li> <li><a href="#two">hello jQuery</a></li> <li><a href="#three">hello ScrollSpy</a></li> </ul> </div> <div style="margin-left:200px;"> <h2 id="one">This is one.</h2> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <h2 id="two">This is two.</h2> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <h2 id="three">This is three.</h2> <p>......</p> <p>......</p> <p>......</p> <p>......</p> </div> </body> </html>
2. angular里面有路由，所以锚点的使用要小心，而href也要改变，可以改源码使用data-target替代a的href
$scope.scrollTo = function(id,target) { $location.hash(id); $anchorScroll(); $('.active.process-item').removeClass('active'); $(target).parent().addClass('active'); return false; };