滚动到页面加载Div底部(jQuery)

小开

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

这将获取页面的高度，并在窗口加载后向下滚动页面。一旦页面准备好，将1000更改为任何您需要的更快/更慢的操作。

小开

试试这个:

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

小开

更新:完整答案见迈克·托德的解决方案。

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

如果你想让它变成动画(超过1000毫秒)。

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

如果你想要即时的。

小开

最佳答案

这里的其他解决方案实际上并不适用于具有大量内容的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);

小开

滚动窗口到目标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);

小开

我在这里看到的所有答案，包括目前“被接受”的答案，实际上都是错误的，因为他们设置了:

scrollTop = scrollHeight

而正确的方法是设置:

scrollTop = scrollHeight - clientHeight

换句话说:

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

或动画:

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

小开

这些都不适合我，我在一个网页应用程序中有一个类似于Facebook messenger的消息系统，并希望消息出现在div的底部。

这是一个基本的Javascript。

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

小开

jquery的动画(版本> 2.0)

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

小开

你可以使用下面的代码滚动到底部的div页面加载。

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

小开

我在一个遗留代码库中工作，试图迁移到Vue。

在我的特定情况下(在引导模式中包装的可滚动div)， v-if显示了新内容，我希望页面向下滚动到这些内容。为了让这种行为工作，我必须等待vue完成重新渲染，然后使用jQuery滚动到模态的底部。

所以…

this.$nextTick(function() {
$('#thing')[0].scrollTop = $('#thing')[0].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);

见image

小开

$(document).ready(function() {
let width = $(window).width();
let element = $("#YourId");
let positionFromTop = element.offset().top + element.prop("scrollHeight");
$("html, body").animate({
scrollTop: Math.abs($(window).height() - positionFromTop)
}, 500);
});