最近工作遇到的问题，用vue写的，有一个锚点的效果，刚刚开始用的是锚点做的，效果做的不是很好，主要是因为，锚点切换，我不能监控锚点的变化，从而修改我的tab切换栏的样式。超级简单的问题，一时间没有想到，真郁闷
刚开始的时候，用offsetTop，但是滚动打的时候，offsetTop的值一直木有变化，我还以为是offsetTop我用错了，查了一些资料，才知道把这个属性理解错了。发现自己的思路也有些问题，后来就换了一种方法。以后记好了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>锚点</title>
<style>
#container{
width: 100%;
height: 2000px;
}
#box1,#box2{
width: 100%;
height: 500px;
background: green;
}
#box2{
background: yellow;
}
#header{
position: fixed;
top:0px;
width: 100%;
height: 200px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="header"><input type="button" id=‘handleClick‘ value=‘click‘></div>
<div id="container">
<div id="box1"></div>
<div id="box2"> </div>
</div>
<script>
document.getElementById(‘handleClick‘).onclick=function(){
var box1 = document.getElementById(‘box1‘).offsetHeight;
animation(box1);
}
function animation(target){
var timer=setInterval(a,30);
function a(){
var speed =Math.ceil((target - document.body.scrollTop)/3);
if(document.body.scrollTop >= target){
clearInterval(timer);
}else{
document.body.scrollTop = document.body.scrollTop + speed;
}
}
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/xmhu/p/6272064.html