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

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

您可以使用Element.scrollTop 。

Answer 2

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