Прокрутіть донизу Div на завантаженні сторінки (jQuery)

У мене на своїй сторінці є діва:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></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() )

Прокрутіть вікно до нижньої частини цільової групи.

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 і хотіла, щоб повідомлення відображалися внизу розділу.

Це працювало частуванням, базовим 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;
})

Ви можете використовувати код нижче, щоб прокрутити сторінку донизу на дні завантаження.

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

Ви можете перевірити scrollHeight та clientHeight за допомогою scrollTop, щоб прокрутити донизу код, подібний нижче.

$('#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);

дивіться зображення