jQuery滚动到页面底部/ iframe

8 回答

• 29

  例如：

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

  回复于 2024-04-19T16:24:55+08:00
• 1

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

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

  随意更改选择器 .

  编辑：请查看汤姆贝茨的答案，以获得更好的答案 .

  回复于 2024-04-19T16:24:55+08:00
• 0

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

  $(document).height()
  

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

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

  回复于 2024-04-19T16:24:55+08:00
• 205

  在这个线程没有为我的特定需求（在我的情况下滚动一个textarea）中找不到之后，我发现了这个超越，这对于阅读此讨论的其他人可能会有所帮助：

  Alternative on planetcloud

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

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

  （谢谢本）

  回复于 2024-04-19T16:24:55+08:00
• 338

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

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

  回复于 2024-04-19T16:24:55+08:00
• 4

  这个对我有用：

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

  回复于 2024-04-19T16:24:55+08:00
• 14

  如果你不必获得元素的高度 . 至少在我尝试的所有浏览器中，如果你给 scrollTop 一个's bigger than the maximum, it' ll只是滚动到底部的数字 . 所以给它最大的数字：

  $(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();
  

  回复于 2024-04-19T16:24:55+08:00
• 2

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

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

  要么

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

  Chrome浏览器中的 will not work 将在Safari in case html 标签中跳跃，其中CSS已设置 overflow: auto; 属性 . 我花了近一个小时才弄明白 .

  回复于 2024-04-19T16:24:55+08:00