jQuery cuộn xuống cuối trang / iframe

Làm cách nào để sử dụng jquery để cuộn xuống dưới cùng của iframe hoặc trang?

Nếu bạn muốn một cuộn hoạt hình chậm đẹp, đối với bất kỳ neo nào với href="#bottom"điều này sẽ cuộn bạn xuống phía dưới:

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

Hãy thay đổi bộ chọn.

scrollTop () trả về số lượng pixel bị ẩn khỏi chế độ xem từ khu vực có thể cuộn, do đó, cung cấp cho nó:

$(document).height()

sẽ thực sự vượt qua cuối trang. Để cuộn thực sự 'dừng lại' ở cuối trang, chiều cao hiện tại của cửa sổ trình duyệt cần được trừ. Điều này sẽ cho phép sử dụng nới lỏng nếu cần, vì vậy nó trở thành:

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

Ví dụ:

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

Sau khi chủ đề này không phù hợp với tôi vì nhu cầu cụ thể của tôi (cuộn bên trong một yếu tố cụ thể, trong trường hợp của tôi là một văn bản), tôi đã tìm thấy điều này trong những điều tuyệt vời hơn, có thể chứng minh hữu ích cho người khác đọc cuộc thảo luận này:

Thay thế trên hành tinhcloud

Vì tôi đã có một phiên bản được lưu trong bộ nhớ cache của đối tượng jQuery của tôi ( myPanelmã bên dưới là đối tượng jQuery), mã tôi đã thêm vào trình xử lý sự kiện của mình chỉ đơn giản là:

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

(cảm ơn Ben)

Một chức năng đơn giản nhảy (cuộn ngay lập tức) xuống dưới cùng của toàn bộ trang. Nó sử dụng tích hợp .scrollTop(). Tôi đã không cố gắng thích ứng điều này để làm việc với các yếu tố trang cá nhân.

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

Cái này làm việc cho tôi:

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

Nếu bạn không quan tâm đến hoạt hình, thì bạn không cần phải lấy chiều cao của yếu tố. Ít nhất trong tất cả các trình duyệt tôi đã thử, nếu bạn đưa ra scrollTopmột con số lớn hơn mức tối đa, nó sẽ chỉ cuộn xuống phía dưới. Vì vậy, cho nó số lượng lớn nhất có thể:

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

Nếu bạn muốn cuộn trang, thay vì một số phần tử bằng thanh cuộn, chỉ cần tạo myScrollingElementbằng 'body, html'.

Vì tôi cần phải làm điều này ở một số nơi, tôi đã viết một hàm jQuery nhanh và bẩn để làm cho nó thuận tiện hơn, như thế này:

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

Vì vậy, tôi có thể làm điều này khi tôi nối thêm một số thứ:

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

Các kịch bản được đề cập trong các câu trả lời trước, như:

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

hoặc là

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

sẽ không hoạt động trong Chrome và sẽ tăng vọt trong Safari trong trường hợp html thẻ trong CSS có thuộc overflow: auto;tính được đặt. Tôi mất gần một giờ để tìm ra.

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

Tôi sử dụng mã này để cuộn trò chuyện khi có tin nhắn mới.