jquery: $ (window) .scrollTop () nhưng không có $ (window) .scrollBottom ()

Tôi muốn đặt một phần tử xuống cuối trang bất cứ khi nào người dùng cuộn trang. Nó giống như "fixed position" nhưng tôi không thể sử dụng css "position: fixed" vì nhiều trình duyệt của khách hàng của tôi không thể hỗ trợ điều đó.

Tôi nhận thấy jquery có thể có được vị trí trên cùng của chế độ xem hiện tại, nhưng làm cách nào để tôi có thể nhận được vị trí cuối cùng của chế độ xem cuộn?

Vì vậy, tôi đang hỏi làm thế nào để biết: $ (window) .scrollBottom ()

var scrollBottom = $(window).scrollTop() + $(window).height();

Tôi sẽ nói rằng một scrollBottom đối lập trực tiếp với scrollTop phải là:

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

Đây là một thử nghiệm xấu xí nhỏ phù hợp với tôi:

// SCROLLTESTER START //
$('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>').insertAfter('body');

$(window).scroll(function () {
  var st = $(window).scrollTop();
  var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  $('#st').replaceWith('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;">scrollTop: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>');
});
// SCROLLTESTER END //

Trong tương lai, tôi đã tạo scrollBottom thành một plugin jquery, có thể sử dụng theo cách giống như scrollTop (tức là bạn có thể đặt một số và nó sẽ cuộn số lượng đó từ cuối trang và trả về số pixel từ cuối trang của trang hoặc trả về số lượng pixel từ cuối trang nếu không có số nào được cung cấp)

$.fn.scrollBottom = function(scroll){
  if(typeof scroll === 'number'){
    window.scrollTo(0,$(document).height() - $(window).height() - scroll);
    return $(document).height() - $(window).height() - scroll;
  } else {
    return $(document).height() - $(window).height() - $(window).scrollTop();
  }
}
//Basic Usage
$(window).scrollBottom(500);

var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

Tôi nghĩ tốt hơn là lấy cuộn dưới cùng.

Điều này sẽ cuộn đến đầu trang:

$(window).animate({scrollTop: 0});

Điều này sẽ cuộn xuống dưới cùng:

$(window).animate({scrollTop: $(document).height() + $(window).height()});

.. thay đổi cửa sổ thành lớp hoặc id vùng chứa mong muốn của bạn nếu cần (trong dấu ngoặc kép).

Đây là tùy chọn tốt nhất cuộn xuống dưới cùng cho lưới bảng, nó sẽ cuộn đến hàng cuối cùng của lưới bảng:

 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });

// Back to bottom button
$(window).scroll(function () {
    var scrollBottom = $(this).scrollTop() + $(this).height();
    var scrollTop = $(this).scrollTop();
    var pageHeight = $('html, body').height();//Fixed

    if ($(this).scrollTop() > pageHeight - 700) {
        $('.back-to-bottom').fadeOut('slow');
    } else {
        if ($(this).scrollTop() < 100) {
            $('.back-to-bottom').fadeOut('slow');
        }
        else {
            $('.back-to-bottom').fadeIn('slow');
        }
    }
});
$('.back-to-bottom').click(function () {
    var pageHeight = $('html, body').height();//Fixed
    $('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
    return false;
});

thử:

 $(window).scrollTop( $('body').height() );

var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();

Đây là một cách hack nhanh chóng: chỉ cần gán giá trị cuộn cho một số rất lớn. Điều này sẽ đảm bảo rằng trang được cuộn xuống dưới cùng. Sử dụng javascript thuần túy:

document.body.scrollTop = 100000;