примеры - Прокрутите вниз до Div на загрузку страницы(jQuery)



jquery html callback (8)

Все ответы, которые я вижу здесь, включая в настоящее время «принятый», на самом деле ошибочны в том, что они устанавливают:

scrollTop = scrollHeight

В то время как правильный подход заключается в том, чтобы установить:

scrollTop = scrollHeight - clientHeight

Другими словами:

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

Или анимированные:

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

https://ffff65535.com

У меня есть div на моей странице:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

Как я могу сделать прокрутку div в нижней части div? Не страница, просто DIV.


Вы можете использовать приведенный ниже код для прокрутки до нижней части div на загрузке страницы.

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

Ни один из них не работал для меня, у меня есть система сообщений внутри веб-приложения, которая похожа на Facebook-мессенджер, и хотела, чтобы сообщения отображались в нижней части div.

Это сработало, основное Javascript.

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

ОБНОВЛЕНИЕ: см . Решение Майка Тодда для получения полного ответа.

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

если вы хотите, чтобы он был анимированным (более 1000 миллисекунд).

$('#div1').scrollTop($('#div1').height())

если вы хотите это мгновенно.


Следующее будет работать. Обратите внимание: [0] и scrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

Я работаю в устаревшей кодовой базе, пытающейся перейти на Vue.

В моей конкретной ситуации (прокручиваемый div, завернутый в bootstrap modal), v-if показал новый контент, который я хотел, чтобы страница прокручивалась вниз. Чтобы заставить это поведение работать, мне пришлось ждать, пока vue завершит повторный рендеринг, а затем используйте jQuery для прокрутки до нижней части модального.

Так...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

попробуй это:

$('#div1').scrollTop( $('#div1').height() )

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Это захватывает высоту страницы и прокручивает ее после загрузки окна. Измените 1000 на все, что вам нужно, чтобы сделать это быстрее / медленнее, как только страница будет готова.





html