简单的写了一下原理:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
#main{width:980px; margin:0 auto; position:relative;}
#rightNav{position:fixed; top:150px; right:20px;}
#rightNav ul li{list-style:none;}
#rightNav li a{width:20px;height:20px;display:inline-block;background:#843303; margin-top:10px;}
#rightNav li a:hover{background:red;}
.title{height:200px;border:1px solid pink; margin:40px auto;}
#rightNav .active a{background:red;}
</style>
<body>
<div id="main">
<div id="rightNav">
<ul>
<li class="active"><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
</div>
<div class="title">111</div>
<div class="title">222</div>
<div class="title">333</div>
<div class="title">444</div>
<div class="title">555</div>
<div class="title">666</div>
<div class="title">777</div>
<div class="title">888</div>
<div class="title">999</div>
</div>
<script>
var oDiv = document.getElementById('main');
var aDiv = oDiv.children;
var oUl = document.getElementById('rightNav');
var aLi = oUl.getElementsByTagName('li');
var arrTop = [];
var oldLi = aLi[0];
for ( var i=1; i<aDiv.length; i++ ) {
arrTop.push( getPos(aDiv[i]).top );
}
for ( var i=0; i<aLi.length; i++ ) {
aLi[i].err= = function (index){
return function () {
oldLi.className = '';
aLi[index].className = 'active';
oldLi = aLi[index];
doMove( arrTop[index] );
};
}(i);
}
function getPos(obj) {
var pos = {left:0,top:0};
while(obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
function doMove ( target ) {
var n = 30;
var iH = document.body.scrollTop || document.documentElement.scrollTop;
n = iH < target ? n : -n;
clearInterval( document.timer );
document.timer = setInterval(function () {
var iH = document.body.scrollTop || document.documentElement.scrollTop;
var speed = iH + n;
if ( speed > target && n > 0 || speed < target && n < 0 ) speed = target;
document.body.scrollTop = speed;
document.documentElement.scrollTop = speed;
if ( speed == target ) {
clearInterval( document.timer );
}
}, 20);
}
</script>
</body>
</html>