Javascript 如何以编程方式滚动溢出：滚动

我有一个页面有三个div，一个在顶部，一个在侧面，一个内容div在左下角。content div包含一系列div。我想要一个按钮，让你一步一步地通过它们，一次突出显示一个。然而，contentdiv包含的数据超过了屏幕上的容量，因此我将其放入了overflow:scroll中。现在我需要确保内容中突出显示的div在用户点击时可见

我尝试过这里和其他网站推荐的各种技术，但它们都会滚动页面而不是content div，这意味着我的标题和侧边栏会滚动出视图。有人能给我一些关于如何滚动溢出div的建议吗？这里是我正在做的一些简化的示例代码

首先是HTML：

    <div id='header'>
        Header
        <input type="button" id="NextButton" value="Next" />
    </div>
    <div id='content' style="overflow: scroll">
        <div id="div1" class='highlight'> Text for div1 </div>
        <div id="div2"> Text for div2 </div>
        <div id="div3"> Text for div3 </div>
        <div id="div4"> Text for div4 </div>
        <div id="div5"> Text for div5 </div>
    </div>
</div>
<div id='sidebar' style="float:right">
    Sidebar
</div>

FWIW，这里是样式元素：

    .highlight { color: Red; }

正如您所看到的，单击NextButton会在div中移动，从而更改高亮显示，但是，我还需要确保div实际上是可见的，例如将其滚动到顶部。顺便说一句，我知道它不会检查结尾，我只是为了简单起见将它剥离到最小值

---

任何帮助都将不胜感激。

jQuery插件可以在单个元素上工作。问题在于知道是否显示了元素。根据浏览器兼容性的不同，这可能并不总是可能的。你可以通过滚动来“作弊”，但是这对用户来说似乎有点紧张。

你可以使用。

没有通读整篇文章，但可能会帮助你。一个类似的、更简单、更快的插件

    .highlight { color: Red; }