jQuery 滚动到页面底部/iframe答案

【问题标题】：jQuery Scroll to bottom of page/iframejQuery 滚动到页面底部/iframe
【发布时间】：2010-12-25 20:21:22
【问题描述】：

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

【问题讨论】：

【解决方案1】：

如果您想要一个不错的慢速动画滚动，对于任何带有href="#bottom" 的锚点，这会将您滚动到底部：

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

随意更改选择器。

【讨论】：

这适用于 Firefox 3.5.7，但不适用于 Chrome 4.0.295.0。以下在 Chrome 中有效： $('html, body').animate({scrollTop: $(document).height()}, 'slow');
@Tom，我看不出你的解决方案和马克的解决方案有什么区别！
@MuhammadGelbana 检查编辑日期。马克似乎更新了他的答案以包括汤姆的修复。
其实不需要获取元素的高度：stackoverflow.com/a/44578849/1450294

【解决方案2】：

scrollTop() 返回从可滚动区域的视图中隐藏的像素数，因此给它：

$(document).height()

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

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

【讨论】：

这应该是公认的答案，Tom 是绝对正确的，因为滚动会突然停止而不是处理缓动的结束，所以接受的答案效果不佳。
注意：easeOutQuint需要插件，jQuery本身只有linear和swing。
老兄，这是个好东西！谢谢。即使使用“swing”而不是“easeoutquint”来执行此操作也显示出明显的差异。
不确定它是否是错误的形式，但我编辑了接受的答案以添加指向该答案的指针。如果是，那么有人可以恢复它。
此解决方案仅在页面以标准兼容模式解释时才有效。例如，如果您没有在 Chrome 中包含 <!DOCTYPE html>，Chrome 将返回完全相同的窗口和文档高度值，在这种情况下，$(document).height()-$(window).height() 将始终返回 0。请参阅此处：stackoverflow.com/questions/12103208/…

【解决方案3】：

例如：

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

【讨论】：

我似乎无法让它发挥作用。什么都不做。
@adam 你用的是什么版本的jQuery？

【解决方案4】：

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

Alternative on planetcloud

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

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

（感谢本）

【讨论】：

用 div 为我工作：var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
你真的需要做数学吗？ stackoverflow.com/a/44578849/1450294

【解决方案5】：

跳转（立即滚动）到整个页面底部的简单函数。它使用内置的.scrollTop()。我没有尝试将其调整为适用于单个页面元素。

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

【讨论】：

我不知道为什么，但这在 Firefox 26.0 上对我不起作用，并且在运行此功能时会滚动到顶部。通过说$(document).scrollTop($(document).height()); 解决了这个问题

【解决方案6】：

如果您不关心动画，那么您不必获取元素的高度。至少在我尝试过的所有浏览器中，如果你给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();

【讨论】：

【解决方案7】：

这个对我有用：

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

【讨论】：

这不能回答问题

【解决方案8】：

之前回答中提到的脚本，比如：

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

或

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

在 Chrome 中不起作用，并且在 Safari 中会跳动以防 html 标签在 CSS 有 overflow: auto; 属性集。我花了将近一个小时才弄清楚。

【讨论】：

【解决方案9】：

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

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

【讨论】：

请对您的代码进行一些解释，尤其是当您从自己的代码库中复制时，使用与其他人无关的 CSS 类；)
获取任何带有滚动条的块；）或整个文档。