Перейти к содержанию внутри прокрутки Div
-
03-10-2019 - |
Вопрос
Я получил следующий HTML:
<div style="height:200px;overflow-y:scroll;">
<table>.....</table>
</div>
С этой настройкой я несколько имитируя расширенную <select>
Контроль с определенным атрибутом @size. Таким образом, чтобы пользователь мог выбрать строку в таблице. Есть ли способ сделать стол «прыгать вверх», чтобы выбранная строка была в верхней части DIV, а вертикальная прокрутка прокручивается в его позицию. Мне не нужен фактический эффект прокрутки. Стол следует изменить свою позицию сразу на ряд.
Решение
Это может работать:
$("#scrollableDiv").animate({
scrollTop: 200 // scrolls to the bottom
}, 1000);
Другие советы
Я предлагаю использовать Scrolltop (или даже анимировать его, если хотите).
$('div')[0].scrollTop = 200 //would set the scrollable div to 200px down.
Вот модифицированный экстракт кода, используемого в: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')
Мы добавляем встроенные здесь, чтобы убедиться, что мы получим правильное начало позиции в прокрутках. Мы используем разницу смещения, поэтому, если вы хотите сделать анимацию анимации, а анимацию от начальной позиции, а не прыгать где-то еще.