เลื่อนไปที่ด้านล่างของ Div เมื่อโหลดหน้าเว็บ (jQuery)

ฉันมี div ในหน้าของฉัน:

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

ฉันจะเลื่อน div ไปที่ด้านล่างของ div ได้อย่างไร? ไม่ใช่หน้าเพียง DIV

โซลูชันอื่น ๆ ที่นี่ไม่ทำงานสำหรับ div ที่มีเนื้อหามากมาย - มัน "maxes out" เลื่อนลงไปที่ความสูงของ 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);

อัปเดต: ดูโซลูชันของ Mike Toddเพื่อรับคำตอบที่สมบูรณ์

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

ถ้าคุณต้องการให้มันเป็นภาพเคลื่อนไหว (มากกว่า 1,000 มิลลิวินาที)

$('#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 messenger และต้องการให้ข้อความปรากฏที่ด้านล่างของ div

นี่ใช้งาน Javascript ขั้นพื้นฐานได้

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

ฉันกำลังทำงานใน codebase ดั้งเดิมที่พยายามย้ายไปยัง Vue

ในสถานการณ์ที่เฉพาะเจาะจงของฉัน (div ที่เลื่อนได้ในโหมด bootstrap), 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");
  }
  
});

เมื่อหน้าโหลดแล้วเลื่อนเป็นค่าสูงสุด

นี่คือกล่องข้อความเมื่อผู้ใช้ส่งข้อความแสดงการแชทล่าสุดเสมอลงเพื่อให้ค่าการเลื่อนเป็น maxium เสมอ

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

ดูภาพ