jquery: $ (window) .scrollTop () tetapi tidak ada $ (window) .scrollBottom ()

Saya ingin menempatkan elemen ke bagian bawah halaman setiap kali pengguna menggulir halaman. Ini seperti "posisi tetap" tetapi saya tidak dapat menggunakan "posisi: tetap" css karena banyak browser klien saya tidak dapat mendukungnya.

Saya perhatikan jquery bisa mendapatkan posisi teratas viewport saat ini, tapi bagaimana saya bisa mendapatkan bagian bawah viewport gulir?

Jadi saya bertanya bagaimana cara mengetahui: $ (window) .scrollBottom ()

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

Saya akan mengatakan bahwa scrollBottom sebagai kebalikan langsung dari scrollTop harus:

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

Berikut adalah tes jelek kecil yang berhasil untuk saya:

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

Untuk masa depan, saya telah membuat scrollBottom menjadi plugin jquery, dapat digunakan dengan cara yang sama seperti scrollTop (yaitu Anda dapat mengatur nomor dan itu akan menggulir jumlah itu dari bagian bawah halaman dan mengembalikan jumlah piksel dari bawah halaman, atau, kembalikan jumlah piksel dari bagian bawah halaman jika tidak ada nomor yang diberikan)

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

Saya pikir lebih baik mendapatkan gulir bawah.

Ini akan menggulir ke atas:

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

Ini akan bergulir ke paling bawah:

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

.. ubah jendela ke id penampung atau kelas yang Anda inginkan jika perlu (dalam tanda kutip).

Berikut adalah opsi terbaik gulir ke bawah untuk kisi tabel, ini akan digulir ke baris terakhir dari kisi tabel:

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

mencoba:

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

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

Ini adalah peretasan cepat: cukup tetapkan nilai gulir ke angka yang sangat besar. Ini akan memastikan bahwa halaman digulir ke bawah. Menggunakan javascript biasa:

document.body.scrollTop = 100000;