jquery: $ (window) .scrollTop () แต่ไม่มี $ (window) .scrollBottom ()

ฉันต้องการวางองค์ประกอบที่ด้านล่างของหน้าเมื่อใดก็ตามที่ผู้ใช้เลื่อนหน้า มันเหมือนกับ "ตำแหน่งคงที่" แต่ฉันไม่สามารถใช้ "position: fixed" css ได้เนื่องจากเบราว์เซอร์ของลูกค้าของฉันไม่สามารถรองรับสิ่งนั้นได้

ฉันสังเกตเห็นว่า jquery สามารถรับตำแหน่งบนสุดของวิวพอร์ตปัจจุบันได้ แต่ฉันจะรับด้านล่างของวิวพอร์ตแบบเลื่อนได้อย่างไร

ดังนั้นฉันจึงถามว่าจะรู้ได้อย่างไร: $ (window) .scrollBottom ()

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

ฉันจะบอกว่า scrollBottom ตรงข้ามกับ scrollTop ควรเป็น:

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

นี่คือการทดสอบที่น่าเกลียดเล็กน้อยที่เหมาะกับฉัน:

// 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 //

ในอนาคตฉันได้สร้าง scrollBottom เป็นปลั๊กอิน jquery ซึ่งใช้งานได้ในลักษณะเดียวกับที่ scrollTop คือ (เช่นคุณสามารถตั้งค่าตัวเลขและมันจะเลื่อนจำนวนนั้นจากด้านล่างของหน้าและส่งคืนจำนวนพิกเซลจากด้านล่าง ของหน้าหรือส่งกลับจำนวนพิกเซลจากด้านล่างของหน้าหากไม่มีการระบุหมายเลข)

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

ฉันคิดว่ามันจะดีกว่าที่จะเลื่อนด้านล่าง

ซึ่งจะเลื่อนไปด้านบนสุด:

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

สิ่งนี้จะเลื่อนลงไปด้านล่างสุด:

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

.. เปลี่ยนหน้าต่างเป็นรหัสคอนเทนเนอร์หรือคลาสที่คุณต้องการหากจำเป็น (ในเครื่องหมายคำพูด)

นี่คือตัวเลือกที่ดีที่สุดเลื่อนไปที่ด้านล่างสำหรับตารางตารางโดยจะเลื่อนไปที่แถวสุดท้ายของตารางตาราง:

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

ลอง:

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

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

นี่คือการแฮ็กอย่างรวดเร็ว: เพียงกำหนดค่าการเลื่อนเป็นตัวเลขที่มาก เพื่อให้แน่ใจว่าเพจถูกเลื่อนไปที่ด้านล่างสุด ใช้จาวาสคริปต์ธรรมดา:

document.body.scrollTop = 100000;