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


当前回答

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

当我添加一个buncho'的东西时,我可以这样做:

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

其他回答

一个简单的函数,跳到整个页面的底部(立即滚动)。它使用内置的. scrolltop()。我还没有尝试将其用于单独的页面元素。

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

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

当我添加一个buncho'的东西时,我可以这样做:

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

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

$(document).height()

会超出页面的底部。为了让滚动实际“停止”在页面底部,需要减去当前浏览器窗口的高度。这将允许在需要时使用easing,所以它变成:

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

在这个线程没有为我的特定需求工作之后(在我的情况下,一个文本区域内滚动一个特定元素),我在伟大的超越中发现了这一点,这可能对其他人阅读这个讨论有帮助:

备选行星云

因为我已经有了我的jQuery对象的缓存版本(下面代码中的myPanel是jQuery对象),我添加到我的事件处理程序的代码是这样的:

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

(由于本)

之前的回答中提到的脚本,比如:

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

or

((窗口).scrollTop美元(文档).height ());

将不会在Chrome中工作,并将在Safari中跳跃,以防html标签在CSS中溢出:auto;属性集。我花了将近一个小时才弄明白。