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

Ответ 1

Другие решения здесь фактически не работают для 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);

Ответ 2

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

scrollTop = scrollHeight

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

scrollTop = scrollHeight - clientHeight

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

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

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

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

Ответ 3

UPDATE: см. решение Майка Тодда для получения полного ответа.

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

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

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

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

Ответ 4

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

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

Ответ 5

попробуйте следующее:

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

Ответ 6

Прокрутите окно до нижней части целевого 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');

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

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

Так...

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

Ответ 11

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

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

Ответ 12

Вы можете проверить 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");
  }
  
});