JQuery: How to make DIV within Scroll window focused?

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');

Answer 2

You can scroll an element into view by using element.scrollIntoView().

Answer 3

I would take a look this plugin.

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Depending on what you need there may be a simpler solution without using a plug-in if you just want to scroll.