如何让窗口的滚动条随着内容的变化自动滚动
http://打开这个网站，右边有显示字幕功能，谁能告诉我这个显示字幕的窗口的滚动条如何跟着里面的高亮部分字自动滚动？
能有高人指个思路也行，感激，感激！！！！
我是这么做的，看看行不行
<html>
<body>
<style>
.red{
background-color:#f00;
}
</style>
<script type="text/javascript">
<!--
var curr = 1;
function mytest(){
document.getElementById("p"+curr).className="";
curr++;
if(curr>9) curr=1;
document.getElementById("p"+curr).scrollIntoView();
document.getElementById("p"+curr).className="red";
}
-->
</script>
<div id="mydiv" style=" overflow-y:scroll;width:200px;height:100px; border:1px solid #ccc;">
<p id="p1" class="red">11111111111</p>
<p id="p2">22222222</p>
<p id="p3">333333333</p>
<p id="p4">444444444</p>
<p id="p5">5555555</p>
<p id="p6">666666666</p>
<p id="p7">777777777</p>
<p id="p8">888888888</p>
<p id="p9">9999999999</p>
</div>
<button type="button" onclick="mytest()">testbtn</button>
</body>
</html>