Прокрутите до нижней части Div при загрузке страницы (jQuery)

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

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

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

Другие решения здесь на самом деле не работают для div с большим количеством контента - они "максимально" прокручиваются вниз до высоты div (вместо высоты содержимого div). Таким образом, они будут работать, если у вас нет более чем удвоенного содержания div внутри него.

Вот правильная версия:

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

или версия jQuery 1.6+:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

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

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

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

scrollTop = scrollHeight

Принимая во внимание, что правильный подход должен установить:

scrollTop = scrollHeight - clientHeight

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

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

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

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

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

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

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

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

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

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

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

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

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

Прокрутите окно к нижней части целевого div.

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

Следующее будет работать. Пожалуйста, обратите внимание [0]иscrollHeight

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

для анимации в jquery (версия> 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

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

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

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

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

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

Так...

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

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

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

Вы можете проверить scrollHeight и clientHeight с помощью scrollTop, чтобы прокрутить до конца div, как показано ниже.

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

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

Это окно сообщения, когда пользователь отправляет сообщение, а затем всегда показывает последний чат вниз, так что значение прокрутки всегда максимально.

$('#message').scrollTop($('#message')[0].scrollHeight);

увидеть изображение