Saltar a contenido dentro de un div desplazable

Question

Tengo el siguiente código HTML:

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

Con esta configuración estoy un poco imitando el control <select> ampliado con @size atributo definido. Por lo tanto, que un usuario puede seleccionar una fila en la tabla. ¿Hay alguna manera, para que la mesa de "saltar", de manera que la fila seleccionada parece estar en la parte superior del div y la barra de desplazamiento vertical desplazado a su posición. No necesito el efecto de desplazamiento real. La tabla debe cambiarlo de posición de inmediato en el corredor de clic.

Answer 1

Este trabajo podría:

$("#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.