Zum Inhalt wechseln innerhalb eines scrollbaren div

Question

Ich habe das folgende HTML:

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

Mit diesem Setup bin nachahmt ich etwas die erweiterte <select> Steuerung mit @size Attribute definiert. Also, das könnte ein Benutzer eine Zeile in der Tabelle auswählen. Gibt es eine Möglichkeit, die Tabelle „aufspringen“ zu machen, so dass die ausgewählte Zeile am oberen Rand des div und die vertikale Bildlaufleiste zu seiner Position verschoben zu sein scheint. Ich brauche nicht den tatsächlichen Scrolling-Effekt. Die Tabelle sollte es die Position sofort auf Zeile klicken ändern.

Answer 1

Dies könnte funktionieren:

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

Answer 2

Ich schlage vor, mit scrollTop (oder sogar animieren, wenn Sie möchten).

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

http://jsfiddle.net/8mepH/

Answer 3

Hier ist ein modifizierter Auszug des Codes verwendet in: http://www.balupton.com/sandbox/jquery-scrollto/demo/

tun, was Sie wollen:

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

Wir fügen eine Inline hier, um sicherzustellen, dass wir die richtige Startposition innerhalb des rollbaren Bereichs erhalten. Wir verwenden eine Offset-Differenz also, wenn Sie Animationen machen wollen es Animationen von der Startposition, anstatt woanders zu springen.