如何使用自己的滚动条以编程方式滚动div？

I have a HTML page with an internal DIV used for content. The internal DIV has its own scrollbars. I would like to automatically scroll to a certain position in the DIV.

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

How can I do this? (Note that I do NOT want to auto scroll the Window scrollbars - I already know how to do this)

我怎样才能做到这一点？（请注意，我不想自动滚动窗口滚动条 - 我已经知道如何执行此操作）

A cross platform solution is needed

需要跨平台解决方案

5 个解决方案

#1

The div has a scrollTop property that you can set (and its pal, scrollLeft).

div有一个你可以设置的scrollTop属性（及其pal，scrollLeft）。

jsFiddle Demo

jsFiddle演示
scrollTop on MDN

MDN上的scrollTop
scrollLeft on MDN

MDN上的scrollLeft

#2

Add a div (where you want to scroll):

添加div（您要滚动的位置）：

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

and add a link like this:

并添加如下链接：

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

if you want a smooth scroll you can check this

如果你想要一个平滑的滚动，你可以检查这一点

#3

As long as JavaScript is acceptable, I created a demo using jQuery that uses a known element with an ID inside the div.

只要JavaScript可以接受，我就使用jQuery创建了一个演示，它使用了div中已有ID的已知元素。

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

If you only know how far, in terms of pixels, rather than to a specific element, it could be adapted to:

如果你只知道像素而不是特定元素的距离，它可以适应：

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

#4

there is this .scrollTo() method which can help you scroll through your divs. try it for more info visit here

有这个.scrollTo（）方法可以帮助你滚动你的div。尝试更多信息访问这里

#5

I would recommend having a look at the scrollTo jQuery plugin. It's a really handy plugin that allows you to animate a scroll within any element. I've setup a small example in jsFiddle that demonstrates how it works. The example shows how you "scroll to" the third p in the first div, and then the second p in the second div. One thing worth noting, is that to ensure the position().top is correct, you'll need to set the containing div to have a position: relative;. Hopefully this isn't too much of a problem though. :)

我建议看一下scrollTo jQuery插件。这是一个非常方便的插件，允许您在任何元素内动画滚动。我在jsFiddle中设置了一个小例子来演示它是如何工作的。该示例显示了如何“滚动到”第一个div中的第三个p，然后是第二个div中的第二个p。值得注意的是，为了确保position（）。top是正确的，你需要设置包含div的位置：relative;。希望这不是一个问题。 :)

#1