Как прокрутить вниз до нижнего дочернего div с помощью jquery

У меня есть следующая структура div.Как прокрутить вниз до нижнего дочернего div с помощью jquery

<div id="conversation" class="list-view"> 
<div class="conv"> 
    <div class="msg">Hi 1</div> 
    <div class="msg">Hi 2</div> 
    <div class="msg">Hi 3</div> 
    <div class="msg">Hi 4</div> 
    <div class="msg">Hi 5</div> 
    <div class="msg">Hi 6</div> 
    <div class="msg">Hi 7</div> 
    <div class="msg">Hi 8</div> 
    <div class="msg">Hi 9</div> 
    <div class="msg">Hi 10</div> 
</div> 
</div>

Теперь, когда я добавить на AJAX Submit кнопку новый DIV <div class="msg">Hi 11</div> добавил в конце <div class="conv">. Я хочу прокрутить вниз до нового добавленного div.

Я использовал следующий, но не работает.

$('.conv ').animate({scrollTop: $('.conv')[0].scrollHeight}, 'slow'); 
                     $('.conv').scrollTop($('.conv')[0].scrollHeight);

Как прокрутить вниз до нижнего дочернего div. Положение родительского div фиксировано.

источник

2015-07-15 Dhara

вам нужно добавить CSS для ко DIV – Pete

Каких CSS необходимых? – Dhara

Возможный дубликат [Прокрутить в конец div?] (Http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div) – CBroe

Вам нужно будет зафиксировать высоту .conv, если вы хотите, чтобы просмотреть это. В противном случае используйте прокрутку на теле.

Демо: http://jsfiddle.net/GCu2D/775/

JS:

$(document).ready(function() { 
    $('.conv ').animate({ 
     scrollTop: $('.conv .msg:last-child').position().top 
    }, 'slow'); 
});

CSS:

.conv { 
    max-height:100px; //for demo 
    overflow:auto; 
}

источник

2015-07-15 10:49:01

Привет, он прокручивает до последнего элемента, но после прокрутки снова фокусируется на верхний div. для div 'max-height'? – Dhara

Вам нужно будет иметь высоту, чтобы прокручивать этот div. Без высоты полоса прокрутки не появится и, следовательно, прокрутки не произойдет. Таким образом, вам нужно будет установить некоторую высоту на этом div. Вы можете вернуться назад к вершине div, снова следуя тому же логину в функции обратного вызова анимации. –

Вот обновленная демонстрация: http://jsfiddle.net/GCu2D/777/ –

Вы можете использовать следующий код, как:

$('.conv').animate({scrollTop: $('.conv div.msg:last').offset().top});

Для демонстрации: http://jsfiddle.net/GCu2D/776/

источник

2015-07-15 10:45:07

Я бы использовал 'position', а не' offset' – Pete

. Вы можете использовать это, поскольку метод .position() позволяет нам извлекать текущую позицию элемента относительно родителя смещения, тогда как метод offset() извлекает текущую позицию относительно к документу. –

Это не работает :( – Dhara

Как прокрутить вниз до нижнего дочернего div с помощью jquery

ответ

Смежные вопросы