设置 div 的高度 + 滚动到底部

Question

我正在尝试让页面自动滚动到底部 - 世界上最简单的事情，对吧？好吧，没那么多。我们有一个 SPA（使用 Kendo UI）用于一个非常简单的论坛。该页面的部分 JS 包括设置我们内容的高度 div，我发现这会阻止标准的 scrollTop 功能工作。

页面如下：

header是静态的，页脚粘在页面底部。您会注意到滚动条没有位于添加评论部分的后面，这是我们设置高度的部分原因。

设置高度：

$('.content-area').height($(window).height() - ($('header nav').height() + $('.disc-add-comment-cont').height()));

.content-area 是页面上的所有内容，不包括 header 和导航。 header nav 是静态的 header，.disc-add-comment-cont 是添加评论页脚。

我用于底部滚动条的代码与它来时一样普通：

$("html, body").animate({ scrollTop: $(document).height() }, "slow");

我也试过：

$("html, body").animate({ scrollTop: $(window).height() - ($('header nav').height() + $('.disc-add-comment-cont').height()) }, "slow");

考虑第一次身高计算，但没有运气。

即使使用我们现有的高度计算，我也需要滚动到底部的功能才能正常工作。我很难发布一个可行的示例，但我 100% 确定这是我们的高度计算。将其留在代码中，滚动不起作用。将其注释掉，滚动按预期工作。

Answer 1

您的滚动条在 .content-area 元素上，而不是在 html 或 body 上，因此您应该滚动该元素：

$(".content-area").animate({scrollTop: $('.content-area').prop("scrollHeight")}, "slow");

Setting height of div + scroll to bottom