jquery: $ (finestra) .scrollTop () ma non $ (finestra) .scrollBottom ()

Voglio posizionare un elemento in fondo alla pagina ogni volta che l'utente scorre la pagina. È come "posizione fissa" ma non posso usare "posizione: fissata" poiché molti dei browser dei miei clienti non lo supportano.

Ho notato che jquery può ottenere la posizione superiore della visualizzazione corrente, ma come posso ottenere la parte inferiore della visualizzazione di scorrimento?

Quindi sto chiedendo come sapere: $ (window) .scrollBottom ()

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

Direi che uno scrollBottom come opposto diretto di scrollTop dovrebbe essere:

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

Ecco un piccolo brutto test che funziona per me:

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

Per il futuro, ho trasformato scrollBottom in un plugin jquery, utilizzabile nello stesso modo in cui lo è scrollTop (cioè puoi impostare un numero e farà scorrere quella quantità dalla parte inferiore della pagina e restituirà il numero di pixel dal fondo della pagina oppure, restituisce il numero di pixel dalla parte inferiore della pagina se non viene fornito alcun numero)

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

Penso che sia meglio ottenere lo scorrimento inferiore.

Questo scorrerà fino in cima:

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

Questo scorrerà fino in fondo:

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

.. cambia la finestra con l'ID contenitore o la classe desiderati, se necessario (tra virgolette).

Ecco l'opzione migliore scorri verso il basso per la griglia della tabella, scorrerà fino all'ultima riga della griglia della tabella:

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

provare:

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

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

Questo è un trucco rapido: assegna semplicemente il valore di scorrimento a un numero molto grande. Ciò assicurerà che la pagina scorra fino in fondo. Utilizzando semplice javascript:

document.body.scrollTop = 100000;