Jump to content inside of a scrollable div.

Question

Hello. I apologize if the title of this question is a bit misleading, I could not come up with a better name.

I got the following HTML:

<div style="height:200px;overflow-y:scroll;">
  <table>.....</table>
</div>

With this setup I'm somewhat mimicking the expanded <select> control with @size attribute defined. So, that a user could select a row in the table. Is there a way, to make the table "jump up", so that the selected row appears to be at the top of the div and the vertical scrollbar scrolled to its position. I don't need the actual scrolling effect. The table should change it's position right away on row click.

I feel like this isn't a very good explanation, I'm struggling to find the right words. Let me know if I should clarify anything, please.

Thank you.

Answer 1

This might work:

$("#scrollableDiv").animate({
  scrollTop: 200 // scrolls to the bottom
}, 1000);

Answer 2

I suggest using scrollTop (or even animate it if you want).

$('div')[0].scrollTop = 200 //would set the scrollable div to 200px down.

http://jsfiddle.net/8mepH/

Answer 3

Here is an modified extract of the code used in: http://www.balupton.com/sandbox/jquery-scrollto/demo/

To do what you want:

            // Fetch the scrollable div
            $container = $('#scrollable');
            // Fetch the target div
            $target = $('#target');

            // Prepare the Inline Element of the Container
            var $inline = $('<span/>').css({
                'position': 'absolute',
                'top': '0px',
                'left': '0px'
            });
            var position = $container.css('position');

            // Insert the Inline Element of the Container
            $container.css('position','relative');
            $inline.appendTo($container);

            // Determine the Offsets
            var startOffset = $inline.offset().top,
                targetOffset = $target.offset().top,
                offsetDifference = targetOffset - startOffset;

            // Perform the jump
            $container.css('scrollTop',offsetDifference+'px')

We add a inline here to ensure we get the correct start position within the scrollable area. We use a offset difference so if you want to do animations it animations from the start position, rather than jumping somewhere else.