bootstrap scroolspy踩坑

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;
};