Question

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

Answer 1

如果你想要一个漂亮的慢动画滚动，对于href="#bottom"的任何锚点，这会将你滚动到底部：

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

随意更改选择器。

Answer 2

scrollTop（）返回可滚动区域中隐藏的像素数，因此给它：

$(document).height()

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

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

Answer 3

例如：

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

Answer 4

在这个线程为我的特定需求（在我的情况下是一个特殊元素内滚动）之后没有成功之后我发现了这个超越，这可能对其他人阅读这个讨论有帮助：

Alternative on planetcloud

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

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

（感谢Ben）

Answer 5

一个简单的函数，可以跳转（立即滚动）到整个页面的底部。它使用内置的.scrollTop()。我没有尝试过这个来适应单个页面元素。

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

Answer 6

这个对我有用：

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

Answer 7

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

Answer 8

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

web.xml

或

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

Chrome 中的

无效，如果 $(window).scrollTop($(document).height());标记 Safari 在 CSS 中设置了html属性。我花了将近一个小时才弄明白。

Answer 9

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

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

jQuery滚动到页面底部/ iframe

9 个答案: