jQuery滚动到页面/ iframe的底部

如何使用jquery向下滚动到iframe或页面的底部？

如果您想要一个不错的慢速动画滚动，那么任何具有href="#bottom"此锚点的锚点都将您滚动到底部：

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

随时更改选择器。

scrollTop（）返回可滚动区域从视图中隐藏的像素数，因此可以这样：

$(document).height()

实际上会超出页面底部。为了使滚动实际上“停止”在页面底部，需要减去浏览器窗口的当前高度。如果需要，这将允许使用缓动，因此它将变为：

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

例如：

$('html, body').scrollTop($(document).height());

在此线程无法满足我的特定需求（滚动到特定元素（在我的情况下为文本区域）中）之后，我在更广阔的范围内发现了这一点，这可能对其他阅读此讨论的人有所帮助：

PlanetCloud的替代方案

由于我已经有了jQuery对象的缓存版本（myPanel下面的代码是jQuery对象），因此我添加到事件处理程序中的代码就是这样：

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

（感谢本）

一个简单的函数，可跳转（即时滚动）到整个页面的底部。它使用内置的.scrollTop()。我还没有尝试过将其修改为适合单个页面元素。

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

这个为我工作：

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

如果您不关心动画，则不必获取元素的高度。至少在我尝试过的所有浏览器中，如果您提供scrollTop的数字大于最大值，它将滚动到底部。因此，请尽可能提供最大数量：

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

如果要滚动页面，而不是滚动条中的某些元素，则使其myScrollingElement等于“ body，html”。

由于我需要在多个地方执行此操作，因此我编写了一个快速而肮脏的jQuery函数以使其更加方便，例如：

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

因此，当我添加一堆东西时，我可以这样做：

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

先前答案中提到的脚本，例如：

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

要么

$(window).scrollTop($(document).height());

将无法工作在Chrome浏览器，并将于Jumpy在Safari浏览器 的情况下， html标签在CSS具有overflow: auto;属性集。我花了近一个小时才弄清楚。

$('.block').scrollTop($('.block')[0].scrollHeight);

当收到新消息时，我使用此代码滚动聊天。