Как прокрутить элемент внутри прокручиваемого 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.
Ответ 4
Взгляните на плагин jquery scrollTo - вы можете использовать его для перехода к определенному элементу DOM
http://flesler.blogspot.com/2007/10/jqueryscrollto.html