如何以编程方式滚动带有自己滚动条的 div？答案

【问题标题】：How can I scroll programmatically a div with its own scrollbars?如何以编程方式滚动带有自己滚动条的 div？
【发布时间】：2012-05-17 11:30:38
【问题描述】：

我有一个带有用于内容的内部 DIV 的 HTML 页面。内部 DIV 有自己的滚动条。我想自动滚动到 DIV 中的某个位置。

我该怎么做？（请注意，我不想自动滚动 Window 滚动条 - 我已经知道该怎么做）

需要一个跨平台的解决方案

【问题讨论】：

标签： css html

【解决方案1】：

该 div 有一个您可以设置的 scrollTop 属性（及其伙伴 scrollLeft）。

【讨论】：

【解决方案2】：

只要 JavaScript 是可接受的，我就创建了一个 demo using jQuery，它使用了一个已知元素，该元素在 div 中具有 ID。

$(function() {
    var testOffset = $('#test').offset(),
        scrollOffset = $('#scroll').offset();
    $('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});

如果您只知道多远（以像素为单位，而不是特定元素），它可以适应：

$(function() {
    $('#scroll').scrollTop(100);
});

【讨论】：

【解决方案3】：

有这个.scrollTo() 方法可以帮助你滚动浏览你的div。尝试了解更多信息，请访问here

【讨论】：

【解决方案4】：

添加一个 div（你想要滚动的地方）：

<div id="#scroll-here">Test..</div>

并添加这样的链接：

<a href="#scroll-here">Scroll to Test</a>

如果你想要流畅的滚动，可以查看this

【讨论】：

【解决方案5】：

我建议您查看scrollTo jQuery plugin。这是一个非常方便的插件，可让您在任何元素中为滚动设置动画。我在jsFiddle 中设置了一个小例子来演示它是如何工作的。该示例显示了如何“滚动到”第一个 div 中的第三个 p，然后在第二个 div 中“滚动到”第二个 p。值得注意的一件事是，为了确保position().top 正确，您需要将包含div 设置为具有position: relative;。希望这不是太大的问题。 :)

【讨论】：