Question

I have the following HTML/CSS:

#scrollpanel{height:100px;overflow-x:hidden;overflow-y:scroll;width:200px}

<div id="scrollpanel">
    <div class="listing ref_1">...</div>
    <div class="listing ref_2">...</div>
    <div class="listing ref_3">...</div>
    ...
</div>

As you can see, the scrollpanel is a scrollwindow defined to have a height of 100px and width of 200px.

How can I programmatically scroll the scrollpanel scrollbar/window to make a particular DIV focused/viewable, even if that DIV is not not currently viewable?

For example, say I have 10 DIVs (ref_1 to ref_10). Only 3 of the ref_ DIV can be viewable at a time based on the height of scrollpanel window. Now let’s say I want to have the scrollbar auto scrolled to DIV ref_7, which is currently not viewable. How do I programmicatly have the scrollwindow scroll to and focus on ref_7?

Answer 1

Use the jQuery ScrollTo plugin, it’s as simple as:

$('#scrollpanel').scrollTo('.ref_7');