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

Question

我有一个页面有三个 div，一个在顶部，一个在侧面，一个内容 div 在左下角。内容 div 包含一系列 div。我想要一个按钮，可以让您逐步浏览它们，一次突出显示它们。但是，内容 div 包含的数据超出了屏幕所能容纳的范围，因此我将其放入了溢出：滚动。现在我需要确保内容中突出显示的 div 在用户点击时可见。

我尝试了这里和其他网站推荐的各种技术，但它们都滚动页面而不是内容 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>

现在是 JavaScript（注意它显然是使用 jQuery）

    var current;
    $(document).ready(function () {
        var current = $('#div1');
        $('#NextButton').click(function() {
            current.removeClass('highlight');
            current = current.next();
            current.addClass('highlight');
          // Somehow make content scroll to the top of the div#content  
        })
    });

FWIW，这里是样式元素：

    .highlight { color: Red; }

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

任何帮助将不胜感激。

Answer 1

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

Answer 2

您可以使用Element.scrollTop。