Как прокрутить элемент внутри прокручиваемого div вверху

У меня есть свиток с прокруткой списка контактов, который прокручивается на странице. Основываясь на идентификаторе contact_XXXX, я бы хотел, чтобы позиция прокрутки # списка контактов-скроллеров была установлена ​​в ставку, чтобы убедиться, что элемент contact_XXX находится в верхней части страницы.

<div id="contact-list-scroller">
   <div id="contact_8965">stuff</div>
   <div id="contact_8966">stuff</div>
   <div id="contact_8967">stuff</div>
   <div id="contact_8968">stuff</div>
   <div id="contact_8969">stuff</div>
   .....
</div>

Вот что я до сих пор:

$('#contact-list-scroller').scrollTop($('#contact_' + id).scrollTop());

Но это просто прокрутка вверх. Идеи? Благодаря

Ответы

Ответ 1

Думаю, вам понадобится position().top. Поскольку значения, возвращаемые position(), относятся к его родительскому объекту (в отличие от offset()), это делает ваш код более гибким. Если вы измените позицию своего родительского контейнера, ваш код не сломается.

Пример:

var contactTopPosition = $("#contact_8967").position().top;
$("#contact-list-scroller").scrollTop(contactTopPosition);

или анимированный:

$("#contact-list-scroller").animate({scrollTop: contactTopPosition});

См. jsfiddle: http://jsfiddle.net/5zf9s/

Ответ 2

Даже у меня была такая же ситуация, и мне хотелось прокрутить элемент вверх. Теперь есть прямая поддержка этого поведения.

Просто используйте метод <element>.scrollIntoView(true) JavaScript.

Пример:

document.getElementById("yourElementId").scrollIntoView(true);

Дополнительная информация:

Несмотря на то, что сейчас это экспериментально, вскоре получит поддержку в каждом браузере. Вы можете найти дополнительную информацию об этом по адресу: MDN

Ответ 3

var scrollTop = $('#contact_' + id).offset().top;

$('#contact-list-scroller').attr('scrollTop', scrollTop);

jsFiddle.