javascript - 跳转到可滚动 div 内的内容

Question

我得到以下 HTML：

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

通过这个设置，我有点模仿<select>定义了@size 属性的扩展控件。因此，用户可以选择表中的一行。有没有办法让表格“跳起来”，使选定的行出现在 div 的顶部，并且垂直滚动条滚动到它的位置。我不需要实际的滚动效果。该表应在行单击时立即更改其位置。

Answer 1

这可能有效：

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

Answer 2

我建议使用 scrollTop （如果你愿意，甚至可以动画它）。

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

http://jsfiddle.net/8mepH/

Answer 3

以下是修改后的代码摘录： http ://www.balupton.com/sandbox/jquery-scrollto/demo/

做你想做的事：

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

我们在这里添加一个内联，以确保我们在可滚动区域内获得正确的起始位置。我们使用偏移量差异，因此如果您想制作动画，它会从起始位置开始制作动画，而不是跳转到其他地方。