Câu trả lời:
Các giải pháp khác ở đây không thực sự hiệu quả với các div có nhiều nội dung - nó "tối đa hóa" cuộn xuống chiều cao của div (thay vì chiều cao của nội dung của div). Vì vậy, chúng sẽ hoạt động, trừ khi bạn có nhiều hơn gấp đôi chiều cao của div trong nội dung của nó.
Đây là phiên bản chính xác:
$('#div1').scrollTop($('#div1')[0].scrollHeight);hoặc phiên bản jQuery 1.6+:
var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));Hoặc hoạt hình:
$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);div1?
d = $('#div1'); $(d).scrollTop( $(d).prop("scrollHeight") );
Tất cả các câu trả lời mà tôi có thể thấy ở đây, bao gồm cả câu trả lời hiện được "chấp nhận", thực sự sai ở chỗ chúng đặt:
scrollTop = scrollHeightTrong khi đó cách tiếp cận đúng là đặt:
scrollTop = scrollHeight - clientHeightNói cách khác:
$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);Hoặc hoạt hình:
$("#div1").animate({
scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);CẬP NHẬT: xem giải pháp của Mike Todd để có câu trả lời đầy đủ.
$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);nếu bạn muốn nó hoạt hình (hơn 1000 mili giây).
$('#div1').scrollTop($('#div1').height())nếu bạn muốn nó ngay lập tức.
$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});Cái này lấy chiều cao của trang và cuộn nó xuống khi cửa sổ đã được tải. Thay đổi 1000thành bất cứ điều gì bạn cần để làm nhanh hơn / chậm hơn một khi trang đã sẵn sàng.
thử cái này:
$('#div1').scrollTop( $('#div1').height() )Cửa sổ cuộn xuống dưới cùng của div đích.
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');Sau đây sẽ làm việc. Xin lưu ý [0]vàscrollHeight
$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);Không ai trong số này hoạt động với tôi, tôi có một hệ thống tin nhắn bên trong một ứng dụng web tương tự như trình nhắn tin của Facebook và muốn các tin nhắn xuất hiện ở cuối div.
Điều này làm việc một điều trị, Javascript cơ bản.
window.onload=function () {
var objDiv = document.getElementById("MyDivElement");
objDiv.scrollTop = objDiv.scrollHeight;
}Tôi đang làm việc trong một cơ sở mã di sản đang cố gắng di chuyển đến Vue.
Trong tình huống cụ thể của tôi (div có thể cuộn được theo kiểu bootstrap), v-if hiển thị nội dung mới, mà tôi muốn trang cuộn xuống. Để làm cho hành vi này hoạt động, tôi phải đợi vue hoàn thành kết xuất lại, và sau đó sử dụng jQuery để cuộn xuống dưới cùng của phương thức.
Vì thế...
this.$nextTick(function() {
$('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})Bạn có thể sử dụng mã bên dưới để cuộn xuống dưới cùng của div khi tải trang.
$(document).ready(function(){
$('div').scrollTop($('div').scrollHeight);
});Bạn có thể kiểm tra scrollHeight và clientHeight bằng scrollTop để cuộn xuống dưới cùng của mã div bên dưới.
$('#div').scroll(function (event) {
if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop()))
{
console.log("this is scroll bottom of div");
}
});Khi trang được tải thì cuộn là giá trị tối đa.
Đây là hộp thông báo khi người dùng gửi tin nhắn sau đó luôn hiển thị cuộc trò chuyện mới nhất xuống để giá trị cuộn luôn luôn là maxium.
$('#message').scrollTop($('#message')[0].scrollHeight);